我有一個物件：dynamicJSON正在發生變化。我想將此物件傳遞給多個依賴項：componentA, componentB。我還希望在更改物件時呈現使用物件的依賴項部分。
我嘗試了 useContext Hook，但收到了依賴回圈錯誤。將反應值傳遞給反應依賴項的正確方法是什么？
應用程式.js
import { componetA } from "compA"
import { componetB } from "compB"
import { fetchLatestValue} from "api/fetchLatestValue"
import { useEffect } from "react"
export default function App() {
const dynamicJSON = ???;
useEffect(() => {
let timeoutId;
async function getlatestValue() {
try {
const data = await fetchLatestValue();
// update dynamicJSON here.
} catch (error) {
}
timeoutId = setTimeout(getlatestValue, 1000 * 1);
}
getlatestValue();
return () => {
clearTimeout(timeoutId);
};
}, []);
return (
<componetA />
<componetB />
);
}
康普A
export default function componentA() {
const dynamicJSON = ???;
return(
<div>
{dynamicJSON.value}
</div>
)
};
uj5u.com熱心網友回復：
您是否嘗試useEffect()過依賴陣列？如果依賴陣列中的任何內容發生了變化，就會觸發鉤子函式。
參考：https ://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect
抱歉，我誤讀了您的問題，您應該將dynamicJSON兩個組件都作為prop. 做個dynamicJSON狀態也是個好主意。
經驗法則：如果組件的 prop 或狀態發生更改，則重新渲染該組件。
import { ComponentA } from "compA";
import { ComponentB } from "compB";
import { useEffect, useState } from "react";
export default function App() {
const [dynamicJSON, setDynamicJSON] = useState({});
//...omit
return (
<ComponentA dynamicJSON={dynamicJSON}/>
<ComponentB dynamicJSON={dynamicJSON}/>
);
}
CompA.js
export default function ComponentA(props) {
const { dynamicJSON } = props;
return(
<div>
{dynamicJSON.value}
</div>
)
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/428964.html
標籤：反应
上一篇：如何在反應中訪問嵌套的Obj？