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精确地在创建引用时引用对象的值，而在最终执行引用时 not 。如果希望设置器在执行时使用当前值，则可以将其更改为：

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

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

以其自己的状态存储组件或挂钩自身的功能也是一种经典的反模式，因此出于这种确切原因应避免使用。您应该将所有需要的功能从钩子返回到父组件，然后在那里访问它们-将它们传递回去很容易导致灾难。

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

1 个答案: