慕哥9229398
2022-10-08 10:36:48
我正在嘗試對視圖和其他封裝函數(shù)使用自定義鉤子。但由于某種原因,我需要更新父級的數(shù)據(jù)。對于這種情況,我將處理程序從父級傳遞給自定義鉤子,并且該處理程序正在訪問鉤子狀態(tài)。/* this is hook */ const customhook = useCustomHook({ init: true });/* parent is calling hook function to update data */const actionFromParent = e => { customhook.UpdateFromParentAction("First Data intialized"); };/* hook is assigning parent function */const actionFirst = e => { customhook.SomeAction({ data: "action first", init: true, handler: actionFromParent }); };/* inside hook, it is calling parent function */{state.handler && <button onClick={state.handler}>Click Last</button>}我在這里附加了沙箱代碼: https ://codesandbox.io/s/zen-napier-i6v5g?file=/src/custom.jsx:790-860
1 回答
翻閱古今
TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超5個贊
創(chuàng)建actionFromParent對此的引用時:
const UpdateFromParentAction = data => {
setState({
...state,
data
});
};
擴(kuò)展運(yùn)算符...state在創(chuàng)建引用時準(zhǔn)確地引用對象的值,而不是在最終執(zhí)行時。如果您希望設(shè)置器在執(zhí)行時使用當(dāng)前值,您可以將其更改為:
setState(s => {return {...s, data}});
但是,更一般地說,您不應(yīng)該使用此方法來解決您將過時的值傳遞給您的函數(shù)的事實(shí)。您希望與組件的當(dāng)前狀態(tài)同步的任何邏輯都應(yīng)盡可能包含在useEffect、useCallback、useReducer鉤子等中。
將組件或鉤子自己的函數(shù)存儲在自己的狀態(tài)中也是一種經(jīng)典的反模式,并且正是出于這個原因而應(yīng)避免使用。您應(yīng)該將所需的所有功能從掛鉤返回到父組件并在那里訪問它們 - 將它們向下傳遞是災(zāi)難的接收者。
添加回答
舉報
0/150
提交
取消
