React Hooks useEffect，添加依赖触发死循环

Question

在我的 useEffect 中，我有一个道具依赖项 (setIsValid)。当我将此依赖项添加到 useEffect 时，它会陷入无限循环。

调用子组件时的父级：

const setIsValid = (bool) => {
  const tmpStateCopy = Object.assign({}, state);
  tmpStateCopy.isValid = bool;

  setState(tmpStateCopy);
};

return <Child
  setIsValid={setIsValid}
/>

在子组件中：

const { setIsValid } = props;

const [state, setState] = useState({
  transformations: [],
  duplicateIndexes: []
});

const { transformations, duplicateIndexes } = state;

useEffect(() => {
  const invalids = transformations.find(x => (x.value === '' || x.replaceWith === ''));
  const hasDuplicates = duplicateIndexes.length > 0;
  const isValid = ((invalids === undefined) && (transformations.length > 0) && !hasDuplicates);

  setIsValid(isValid)

  console.log('got triggered');
}, [state]);

这样代码可以工作，但我总是收到警告。

我想要的是，当状态中的值之一发生变化（转换/重复索引）时，始终会触发验证。

通过添加道具中的 setIsValid() 函数，它可以无限运行。

警告看起来像这样：

./src/components/UI/integrationBuilder/layoutElements/transformer/modules/ifModules/ifModule.js
  Line 103:  React Hook useEffect has missing dependencies: 'duplicateIndexes.length', 'setIsValid', and 'transformations'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

我的问题是，如何在不收到此警告的情况下保持相同的逻辑？

Answer 1

因为，当状态改变时你会调用效果。 transformations 和 duplicateIndexes 已经被考虑了。为避免警告，您可以将 destructure 移动到 useEffect

内

const { setIsValid } = props;

const [state, setState] = useState({
  transformations: [],
  duplicateIndexes: []
});



useEffect(() => {
  const { transformations, duplicateIndexes } = state;
  const invalids = transformations.find(x => (x.value === '' || x.replaceWith === ''));
  const hasDuplicates = duplicateIndexes.length > 0;
  const isValid = ((invalids === undefined) && (transformations.length > 0) && !hasDuplicates);

  setIsValid(isValid)

  console.log('got triggered');
}, [state]);

同时将 setIsValid 视为对 useEffect 的依赖，你不能这样做，因为在每次渲染时都会为它创建一个新函数，它会导致 useEffect 一次又一次地运行，除非你重构你的码一下。

const setIsValid = useCallback((bool) => {
  setState(prev =>  Object.assign({}, prev, {isValid: bool});
}, []);

现在您可以将 setIsValid 设置为依赖项。

React Hooks useEffect，添加依赖触发死循环

React Hooks useEffect, adding dependency triggers infinite loop

javascript

reactjs

react-hooks

use-effect