2

我需要调用两个函数来仅在第一次渲染时获取数据。我在这个项目上使用了 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 警告我

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

// eslint-disable-next-line react-hooks/exhaustive-deps是通过在 useEffect 依赖项之前应用到行来做到这一点的唯一方法吗？

4

1 回答 1

4

它指出如果 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 做什么。

于 2019-05-24T15:47:46.360 回答