反应自定义钩子父处理程序没有保持自定义钩子状态

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钩子等中。

将组件或钩子自己的函数存储在自己的状态中也是一种经典的反模式，并且正是出于这个原因而应避免使用。您应该将所需的所有功能从挂钩返回到父组件并在那里访问它们 - 将它们向下传递是灾难的接收者。