反应自定义挂钩父处理程序未保留自定义挂钩 state

Question

我正在尝试对视图和其他封装函数使用自定义钩子。

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

/* 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指的是 object 的值，正是在创建该引用时，而不是在最终执行时。 如果您希望设置器在执行时使用当前值，您可以将其更改为：

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

然而，更一般地说，您不应该使用此方法来解决您将过时的值传递给您的函数的事实。 您希望与组件的当前 state 同步的任何逻辑都应包含在useEffect 、 useCallback 、 useReducer hooks etc 中。 尽可能。

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