ABOUTYOU
2023-08-05 21:12:50
示例: https: //codesandbox.io/s/react-hooks-playground-forked-15ctx ?file=/src/index.tsx一名父級(jí)具有 1 個(gè) useState 掛鉤,3 個(gè)子級(jí)具有 1 個(gè) useEffect 掛鉤。我希望子級(jí)通過(guò)回調(diào)更新父級(jí)中的狀態(tài),以便所有組件狀態(tài)都更新為父級(jí)中的一個(gè)對(duì)象。這不適用于初始/第一次渲染,因?yàn)楫?dāng)前狀態(tài)不會(huì)在每個(gè) useEffect 觸發(fā)的回調(diào)之間更新(請(qǐng)參見上面的示例或下面的代碼)。這意味著組合狀態(tài)僅包含最后一個(gè)子級(jí)的狀態(tài)。const ChildElement = ({ index, callback }) => { useEffect(() => { callback(index); }, []); return <>{index}</>;};const App = () => { const [state, setState] = useState(0); const callback = (index: any) => { const newObject = { a: index }; setState({ ...state, [index]: newObject }); }; console.log(state); return ( <> <ChildElement index={0} callback={callback} /> <ChildElement index={1} callback={callback} /> <ChildElement index={2} callback={callback} /> </> );};我可以在父級(jí)中聲明初始狀態(tài),但這需要更多代碼我可以在渲染緩存中使用(我像 useStae 一樣手動(dòng)更新的對(duì)象,但立即更改),但這感覺很臟鉤子 useReducer 是一個(gè)好的解決方案嗎?有什么建議么?解決這個(gè)問(wèn)題的最佳方法是什么?
1 回答

慕容708150
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊
你面臨著競(jìng)爭(zhēng)條件。
如果你改變
const callback = (index: any) => {
const newObject = { a: index };
setState({ ...state, [index]: newObject });
};
到:
const callback = (index: any) => {
const newObject = { a: index };
setState((currentState) => ({ ...currentState, [index]: newObject }));
};
你的代碼會(huì)起作用
雖然這樣:
所有組件狀態(tài)都更新為父級(jí)中的一個(gè)對(duì)象
這不是一個(gè)好的做法。
更好的子組件擁有自己的狀態(tài),如果這些狀態(tài)彼此相似,您可以通過(guò)創(chuàng)建自定義掛鉤來(lái)減少代碼。
添加回答
舉報(bào)
0/150
提交
取消