React 自定义钩子父处理程序未保持自定义钩子状态

Question

我正在尝试使用自定义钩子来查看和其他封装函数。

但是由于某种原因，我需要更新父级的数据。对于这种情况，我将处理程序从父级传递给自定义钩子，并且该处理程序正在访问钩子状态。

/* 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

Answer 1

当actionFromParent创建对此的引用时：

const UpdateFromParentAction = data => {
setState({
...state,
data
});
};

展开运算符...state精确地引用对象在创建引用时的值，而不是在最终执行引用时引用对象的值。如果希望资源库在执行时使用当前值，可以将其更改为：

setState(s => {return {...s, data}});

但是，更一般地说，您不应该使用此方法来解决将过时值传递给函数的事实。任何你想要与组件的当前状态同步的逻辑都应该尽可能包装在useEffect、useCallback、useReducer钩子等中。

将组件或钩子自己的函数存储在自己的状态下也是一种经典的反模式，因此应避免使用。您应该将所需的所有函数从钩子返回到父组件并在那里访问它们 - 将它们传回去是灾难的秘诀。