Question

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

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”。包括它或删除依赖项数组。但是，当任何 prop更改时，“ props”也会更改，因此，首选的解决方法是在useEffect调用之外对“ props”对象进行解构，并引用useEffect内的那些特定props。

是通过在useEffect依赖项之前的行上应用// eslint-disable-next-line react-hooks/exhaustive-deps来实现此目的的唯一方法吗？

Answer 1

指出，如果props.fetchA和props.fetchB发生更改，则您的代码未设置为使用它进行更新。如果绝对确定要忽略对props.fetchA和props.fetchB的更改，则可以添加eslint-disable。

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

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会做什么，所以我无法准确告诉您

如何设置useEffect以使用eslint-react-hooks首先从API提取数据？

1 个答案: