Question

在useEffect的依赖项数组中定义setState值的背后的想法是什么？

const [someState, setSomeState] = useState();
...
useEffect(() => {
  // Do something
  setSomeState('some value');
}, [setSomeState]);

React Hook useEffect has a missing dependency: 'setSomeState'.
Either include it or remove the dependency array.
eslint(react-hooks/exhaustive-deps)

不完全确定此示例是否会导致eslint要求在依赖项数组中定义setSomeState，但是我在用useEffect编写代码时已经看到了这种情况。在这种情况下，React在听什么？我的理解是useEffect监听依赖项数组中值的更改，但是setSomeState会更改吗？我在这里想念什么？

Answer 1

在这种情况下，不会，useState设置器函数永远不会改变，但是useEffect不知道它是另一个钩子中的函数，它只是看到一个函数。

考虑此用例：

const MyComponent = ({ onUpdate }) => {
  const [state, setState] = useState();
  useEffect(() => {
    // state updated, call onUpdate callback with state
    onUpdate(state);
  }, [onUpdate, state]);
  return ...
}

现在父组件可以给定

<MyComponent onUpdate={onUpdateHandler} />

将onUpdateHandler定义为

let onUpdateHandler = console.log;

然后在仍然挂载时对其进行更改

onUpdateHandler = state => dispatch({ type: 'SAVE_STATE', state });

通过将回调放置在依赖项数组中，效果挂钩将更改onUpdate的值，然后再次触发效果。如果它不包含回调，则它将继续console.log状态更新，而不是现在以不同的方式进行处理。

值更改的可能性大于函数更改的可能性，但是函数值可以更改。您可能有一个建议，建议将挂钩中使用的所有变量都添加到依赖项数组中，这在大多数情况下是正确的做法。例如，有一些例外情况，例如，当您希望效果通过指定一个空数组来挂载组件时，仅只计算一个效果，或者不包括某些您知道的函数的变量时不会在组件的使用期限内发生变化，在这种情况下，您可以使用eslint-disable-next-line react-hooks/exhaustive-deps覆盖来取消标记它作为警告。不过请注意，因为这将禁用掉毛检查，因此，如果不注意，可能会出现漏洞。

在React的useEffect依赖数组中设置状态

1 个答案: