React Hooks useEffect，添加依賴觸發器無限循環

Question

在我的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

我的問題是，如何在不發出此警告的情況下保持相同的邏輯？

Answer 1

因為，當狀態改變時，你將調用效果。 轉換和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設置為依賴項。