如何修复React useEffect缺失values依赖项警告且不重复触发执行？

有两个合规的解决方案，都不需要将values加入依赖数组，也不用手动禁用eslint规则： #

方案1：使用setState函数式更新（改动最小） #

React 支持 setState 传入回调函数的写法，回调的第一个参数会自动拿到当前最新的 state 值，不需要在 useEffect 中引用外部的 state 变量，自然就不会触发依赖警告。

修改后的代码如下：

useEffect(() => {
  getDoH().then(
    (response) => {
      // 用setValues的函数式更新，通过参数拿到最新values，不依赖外部变量
      setValues(prevValues => {
        return Object.fromEntries(
          Object.entries(prevValues).map(([key, _], index) => {
            // 直接返回新的键值对，不修改原prevValues，避免隐式修改state
            return [key, response.data.switchValues[index]]
          })
        )
      })
    },
    (error) => {
      console.log(error);
    }
  );
},[]);

这种方案符合React Hook规则，依赖数组保持为空，只会在页面首次加载时执行一次。 #

方案2：抽离固定的开关键列表（更易维护） #

你的开关键的顺序是固定和后端返回数组一一对应的，完全可以把键列表抽成不变的常量，不需要从state里读取，也能消除对values的依赖：

// 放在组件外部，是固定不变的常量
const SWITCH_KEY_ORDER = [
  'asthma', 'infectiousDisease', 'bleedingDisorder', 'cancer', 'diabetes',
  'epilepsy', 'hivAids', 'stroke', 'heartDisease', 'hbp', 'immuneDisorders',
  'lungDisease', 'mentalDisorder', 'rheumaticDisease', 'smokeTobaccoProducts',
  'radiationTherapy', 'eatingDisorders', 'entDisorders', 'latex', 'localAnasthetics',
  'metals', 'penicillin', 'pollen', 'foods', 'bleedingGums', 'bruxism', 'halitosis',
  'ulcer', 'dryMouth', 'soreJawM'
]

// 组件内初始化state可以直接用常量生成，不用重复手写
const [values, setValues] = useState(() => {
  return Object.fromEntries(SWITCH_KEY_ORDER.map(key => [key, 'off']))
})

// useEffect里直接用常量，不需要依赖values
useEffect(() => {
  getDoH().then(
    (response) => {
      const newValues = Object.fromEntries(
        SWITCH_KEY_ORDER.map((key, index) => [key, response.data.switchValues[index]])
      )
      setValues(newValues)
    },
    (error) => console.log(error)
  );
},[]);

这种方案后续新增开关只需要修改SWITCH_KEY_ORDER一个地方即可，不用同时调整初始化和赋值逻辑，可维护性更高。 #

内容的提问来源于stack exchange，提问作者Mr.Gomer