【问题标题】：UseEffect throwing Warning for useStateUseEffect 对 useState 抛出警告
【发布时间】：2022-01-02 14:27:03
【问题描述】：

大家好，我收到了这个警告

React Hook useEffect 缺少依赖项：'financialBackground' 和'setFinancialBackground'。包括它们或删除依赖数组。如果 'setFinancialBackground' 变化太频繁，找到定义它的父组件并将该定义包装在 useCallback react-hooks/exhaustive-deps

这是我的 useEffect 代码。

useEffect(() => {
    if ((pastRevYear, pastRev)) {
      let objRev;
      objRev = { pastRevYear, pastRev };
      let input = [];
      const check = { ...financialBackground };
      for (let i in check) {
        const item = check[i];
        if (i === "pastRev") {
          for (let j in item) {
            const jitem = item[j];
            if (jitem) {
              input.push(jitem);
            }
          }
        }
      }
      input = [...input, objRev];
      setFinancialBackground({
        ...financialBackground,
        pastRev: input,
      });
    }
  }, [pastRev, pastRevYear]);

我在父组件中定义了这样的 useState。

 const [financialBackground, setFinancialBackground] = useState({
    fundingMethod: props.data
      ? props.data.financialBackground.fundingMethod
      : "",
    otherFundingMethod: props.data
      ? props.data.financialBackground.otherFundingMethod
      : "",
    pastRev: props.data ? props.data.financialBackground.pastRev : "",
    pastExp: props.data ? props.data.financialBackground.pastExp : "",
  });

如果我将 setFinancialBackground 放在依赖数组中，它会多次重新呈现状态。

【问题讨论】：

我认为这个警告是不言自明的？
你为什么要在useEffect这样做？
我想使用 "setFinancialBackground" everyTiime "pastRev" 和 "pastRevYear" 更改而不删除状态中以前的数据。

标签： javascript reactjs use-effect use-state usecallback

【解决方案1】：

这是因为您没有使用 useEffect 挂钩中的依赖项。您正在更改金融背景，因此应将其添加到 useEffect 挂钩，如下所示

useEffect(() => {
    if ((pastRevYear, pastRev)) {
      let objRev;
      objRev = { pastRevYear, pastRev };
      let input = [];
      const check = { ...financialBackground };
      for (let i in check) {
        const item = check[i];
        if (i === "pastRev") {
          for (let j in item) {
            const jitem = item[j];
            if (jitem) {
              input.push(jitem);
            }
          }
        }
      }
      input = [...input, objRev];
      setFinancialBackground({
        ...financialBackground,
        pastRev: input,
      });
    }
  }, [pastRev, pastRevYear, setFinancialBackground, financialBackground]);

【讨论】：

我知道。我也这样做了，它无限次调用 useEffect。我也提出了这个问题。查看我的问题的最后一行

【解决方案2】：

孩子这样更新父值的感觉不太好。

试试吧：

孩子

useEffect(() => {
  if ((pastRevYear, pastRev)) {
    // get objRev 
    setRev(objRev);
  }
}, [pastRev, pastRevYear, setRev]);

家长

const financialBackground = useRef();
const [rev, setRev] = useState();

useEffect(() => {
  // do the rev check here on financialBackground.current then
  financialBackground.current = /* ... */
}, [rev]);

```

【讨论】：