最佳实践：设置加载状态时响应 useEffect 挂钩依赖项答案

【问题标题】：Best practice: React useEffect hook dependencies when setting loading state最佳实践：设置加载状态时响应 useEffect 挂钩依赖项
【发布时间】：2021-12-20 13:29:27
【问题描述】：

我正在学习 React 钩子，并且正在努力解决关于详尽的 deps 的 linting 规则。特别是，我想在进行 API 调用时设置“加载”状态（例如，向用户显示加载消息），然后在返回调用时将其设置为“空闲”，但 linter 说缺少依赖项。这是钩子：

useEffect(() => {
    setStatus(STATUSES.LOADING);
    getData()
      .then(result => {
        setStatus(STATUSES.IDLE);
        setData(result);
      });
  }, []);

根据 linter，我应该为 STATUSES.LOADING 和 STATUSES.IDLE 添加依赖项——但这似乎违反直觉，因为我不想在状态更改时任意重新运行 API 调用。

我不想只是忽略警告，那么这里有更好的模式来实现我想要做的吗？

【问题讨论】：

什么是状态？
@Samira 它只是一个包含两种加载状态的枚举 - 就本示例而言，我们可以轻松地将它们替换为“加载”和“空闲”字符串。
@Samira 有趣的是，我只是尝试这样做（即用简单的字符串替换枚举）并且 linting 错误消失了......虽然我不明白区别！这只是一个常数。
kentcdodds.com/blog/stop-using-isloading-booleans
@Vikas 谢谢 - 一直想多读一点状态机

标签： reactjs react-hooks dependencies fetch-api

【解决方案1】：

linting 规则不知道依赖项是否会改变。它可以避免将来出现意外错误，例如从父组件提供的值并且可以在那里更改。

【讨论】：