如何设置 useEffect 以在第一次使用 eslint-react-hooks 渲染时从 API 获取数据？

Question

我需要调用两个函数来仅在第一次渲染时获取数据。我在这个项目上使用了 react-hooks。所以代码看起来像这样：

const Component = (props) => {

  // init
  useEffect(() => {

    const fetchA = async () => {
      await props.fetchA()
    };

    const fetchB = async () => {
      await props.fetchB()
    };

    fetchA();
    fetchB();
  }, []);
}

fetchA 和 fetchB 是 redux 执行的操作，用于发出请求并将数据保存到 reducer。
然后我将 eslint-react-hooks 添加到项目中。现在 eslint 警告我

块引用 React Hook useEffect 缺少一个依赖项：'props'。要么包含它，要么删除依赖数组。但是，当 any 道具发生变化时，“道具”会发生变化，因此首选的解决方法是在 useEffect 调用之外解构“道具”对象，并在 useEffect 中引用那些特定的道具。

是否只有通过将// eslint-disable-next-line react-hooks/exhaustive-deps 应用到 useEffect 依赖项之前的行来做到这一点？

Answer 1

指出如果 props.fetchA 和 props.fetchB 发生​​变化，您的代码没有设置为随之更新。如果您绝对确定要忽略对 props.fetchA 和 props.fetchB 的更改，则可以添加 eslint-disable。

如果您想让您的代码在 props.fetchA 或 props.fetchB 更改时执行更新，请按照 lint 警告中的说明执行以下操作：

const { fetchA, fetchB } = props;
useEffect(() => {
  // i renamed these so as not to conflict with the outer variables. Feel free to choose different names.
  const a = async () => {/* fetchA() */};
  const b = async () => {/* fetchB() */};
  a();
  b();
}, [fetchA, fetchB]);

根据 fetchA 和 fetchB 正在做什么，您可能需要一些清理逻辑来撤消第一次所做的事情，但我无法准确告诉您是什么，因为我不知道 fetchA 和 fetchB 做什么.