在 useEffect React Hook 中缺少 object 时修复缺少的依赖警告？

Question

所以我得到了一个页面，其中包含一系列基于以下值的开关：

const [values, setValues] = useState({
    asthma: "off",
    infectiousDisease: "off",
    bleedingDisorder: "off",
    cancer: "off",
    diabetes: "off",
    epilepsy: "off",
    hivAids: "off",
    stroke: "off",
    heartDisease: "off",
    hbp: "off",
    immuneDisorders: "off",
    lungDisease: "off",
    mentalDisorder: "off",
    rheumaticDisease: "off",
    smokeTobaccoProducts: "off",
    radiationTherapy: "off",
    eatingDisorders: "off",
    entDisorders: "off",

    latex: "off",
    localAnasthetics: "off",
    metals: "off",
    penicillin: "off",
    pollen: "off",
    foods: "off",

    bleedingGums: "off",
    bruxism: "off",
    halitosis: "off",
    ulcer: "off",
    dryMouth: "off",
    soreJawM: "off",
  });

现在，当用户访问此页面时，我希望根据保存在后端的内容来设置值。 后端返回一个包含值的数组，我将它们设置在 useEffect() 中。 但是我只希望这种情况发生一次。 这是从 spring 后端设置值的代码。

useEffect(() => {
    getDoH().then(
      (response) => {
        let newValues = values;
        let valueArray = Object.entries(newValues).map((v, index) => {
          v[1] = response.data.switchValues[index]
          return v
      });
      newValues = Object.fromEntries(valueArray);
      setValues({...newValues});
      },
      (error) => {
        console.log(error);
      }
    );
  },[]);

getDoH function 只是一个 axios.get 请求。 function 工作正常，但是我在终端中收到此警告：“第 142:5 行：React Hook useEffect 缺少依赖项：'values'。包括它或删除依赖项数组 react-hooks/exhaustive-deps”

现在我知道我可以禁用它，但有没有办法修复它？ 将值添加到 },[]); 不是一个选项，因为我不希望它在每次更改开关时都运行，因为这基本上会使开关不起作用。

有什么建议么？

Answer 1

您可以将setValues()传递给 function，它会根据之前的 state 更新 state。 function 采用以前的 state 并返回新的 state。 这样，您不必引用在useEffect()挂钩之外定义的values 。

例如，

useEffect(() => {
  setValues((state) => generateNewStateFromPrev(state));
}, []);

这是关于 this 的文档。

Answer 2

您可以将 object 存储为 const 而不是 state，这也会使您的代码更清晰。 从代码的含义来看， react-hooks/exhaustive-deps是正确的，您想要运行取决于该values state 的 function。 因此，在一般情况下，如果values更改并且效果取决于它，您最终会得到不一致的 state。

但是您的意图是代码不依赖于 state，而是依赖于它的初始值。 你可以做这样的事情。

const defaultIllnesses = {asthma: "off",  infectiousDisease: "off",...};

function myComp () {
  const [values, setValues] = useState(defaultIllnesses);

  useEffect(() => {
    getDoH().then(
      (response) => {
        const valueArray = Object.entries(defaultIllnesses)
   ...
  }, [defaultIllnesses]); // this const is still a dependency, but it won't change 
  

有一些变体，比如将疾病作为数组['asthma', 'infectiousDisease', ...]但这只是语法糖。 您还可以查看 Array.reduce 以遍历 arrays 并从中创建 object 。