useEffect触发react-hooks/exhaustive-deps警告，补全依赖后重复渲染

解决方案 #

核心思路是使用useState的函数式更新特性，消除对financialBackground的外部依赖，同时利用useState返回的setter函数天然稳定的特性，避免循环渲染。

你出现循环渲染的根本原因不是加入了setFinancialBackground，而是如果把financialBackground加入依赖数组后，每次状态更新都会触发useEffect重新执行，再次修改状态形成死循环。React官方保证useState返回的setter函数在组件生命周期内引用永远不变，加入依赖数组不会触发多余执行。

修改后的useEffect代码如下：

useEffect(() => {
    // 修正原代码错误的判断逻辑：原逗号表达式仅会判断pastRev是否存在，改为同时校验两个变量都有值
    if (pastRevYear && pastRev) {
      const objRev = { pastRevYear, pastRev };
      // 使用函数式更新，通过prev参数获取最新的financialBackground值，不需要依赖外部变量
      setFinancialBackground(prev => {
        let input = [];
        const check = { ...prev };
        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];
        return {
          ...prev,
          pastRev: input,
        };
      })
    }
  }, [pastRev, pastRevYear, setFinancialBackground]); 

修改后就可以完全消除eslint的依赖警告，同时不会出现重复渲染问题。

如果后续遇到类似基于旧状态更新新状态的场景，优先使用函数式更新，都可以避免把状态本身加入依赖数组，从根源规避这类死循环问题。

内容的提问来源于stack exchange，提问作者Tahmass Raheem