[英]React Hooks useEffect, adding dependency triggers infinite loop
在我的useEffect里面,我有一个props依赖项(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]);
这样代码可以工作,但我总是收到警告。
我想要的是,当状态中的一个值发生变化(transformations / duplicateIndexes)时,总是会触发验证。
通过从props中添加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
我的问题是,如何在不发出此警告的情况下保持相同的逻辑?
因为,当状态改变时,你将调用效果。 转换和duplicateIndexes已经考虑过了。 要避免警告,可以在useEffect
移动destructure
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
设置为依赖项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.