React Hooks useEffect，添加依赖项触发无限循环 [英] React Hooks useEffect, adding dependency triggers infinite loop

问题描述

除了useEffect之外，我还有一个props依赖项(setIsValid).当我将此依赖关系添加到useEffect时，它会陷入无限循环.

Inside of my useEffect, I have a props dependency (setIsValid). When I add this dependency to the useEffect, it lands in an infinite loop.

调用子组件时的父项:

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]);

通过这种方式，代码可以工作，但我总是会收到警告.

This way the code works but I always get a warning.

我想要的是，总是在状态中的值之一发生更改(转换/重复索引)时触发验证.

What I want is, that the validation is always triggered when one of the values inside the state changes (transformations / duplicateIndexes).

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

By adding the setIsValid() func from the props, it runs infinitely.

警告看起来像这样:

./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

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

My question is, how can I keep the same logic without getting this warning?

推荐答案

自此，状态更改时，您将调用效果.已经考虑了转换和重复索引.为了避免警告，您可以在 useEffect

Since, when state changes you will call the effect. transformations and duplicateIndexes will already be considered for. To avoid the warning, you can move the destructure within 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一次又一次地运行，直到您稍微重构代码为止.

Also regarding setIsValid as a dependency to useEffect, you must not do that since a new function for it is created on every render and it will cause the useEffect to to run again and again unles you refactor your code a bit.

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

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

and now you can set setIsValid as a dependency.

这篇关于React Hooks useEffect，添加依赖项触发无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！