React Hook useEffect 缺少依賴項：'Score'、'props' 和 'windowDimension

Question

useEffect(()=>{

//after game ends
if(gameEnd){
  props.gameEndHandler(Score)
}
if(!props.gameEnd){
  setScore(prev=>({
    ...prev,
    XScore: 0,
    OScore: 0,
  }));
  setGameEnd(false)

  let size = windowDimension > 620 ? 8 : 6;
  const tempClickAddress = [];
  for (var i = 1; i <= size; i++) {
    let rowValues = [];
    for (var j = 1; j <= size; j++) {
      let tempValue = {
        row: i,
        col: j,
        value: null,
        winBy: null,
      };
      rowValues.push(tempValue);
    }
    tempClickAddress.push(rowValues);
  }

  setGridData(prev=>({
    ...prev,
    clickAddress: tempClickAddress,
  }));
}}, [gameEnd, props.gameEnd]);

在此處輸入圖像描述

我的 chrome 開發工具警告我缺少依賴項。

但我確信我的依賴。 我只是想擺脫那個警告。

非常感謝您的幫助。

Answer 1

這不是一個錯誤，它只是一個警告，你使用的變量比你為 useEffect 反應定義的要多。 更重要的是，這是一個 eslint 警告，而不是 React 的。

為了解決這個問題，你應該添加更多的“間諜”變量，例如：

useEffect(()=>{

//after game ends
if(gameEnd){
  props.gameEndHandler(Score)
}
if(!props.gameEnd){
  setScore(prev=>({
    ...prev,
    XScore: 0,
    OScore: 0,
  }));
  setGameEnd(false)

  let size = windowDimension > 620 ? 8 : 6;
  const tempClickAddress = [];
  for (var i = 1; i <= size; i++) {
    let rowValues = [];
    for (var j = 1; j <= size; j++) {
      let tempValue = {
        row: i,
        col: j,
        value: null,
        winBy: null,
      };
      rowValues.push(tempValue);
    }
    tempClickAddress.push(rowValues);
  }

  setGridData(prev=>({
    ...prev,
    clickAddress: tempClickAddress,
  }));
}}, [gameEnd, props.gameEnd, props.gameEndHandler, setScore, setGameEnd, windowDimension, setGridData]);

或者您可以僅針對此 useEffect 禁用react-hooks/exhaustive-deps規則，例如：

useEffect(() => {
  //...your code

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [gameEnd, props.gameEnd]);

或在全球范圍內 package.json：

{
  ...

  "eslintConfig": {
    "rules": {
      "react-hooks/exhaustive-deps": "off"
    }
  }
}