ReactJS useEffect依赖关系警告导致无限循环

问题描述

在我的功能组件中，我有状态，每当状态更改时，我都想做些事情。所以我用过useEffect，但它给出了“缺少依赖项”错误。在我把所有依赖项显示在错误中后，我得到了无限循环。这是代码：

const [keywords,setKeywords] = useState<Keyword[]>();
const [currentPage,pagingConfig,setPagingConfig] = usePaging();

  useEffect(() => {
    const loadKeywords = async () => {
      const { current,pageSize } = pagingConfig;
      const keywords = await getKeywords(current as number,pageSize as number);
      setKeywords(keywords.data.data);
      setPagingConfig({
        ...pagingConfig,total: keywords.data.total,});
    };
    loadKeywords();
  },[currentPage]); // Requires to add pagingConfig and setPagingConfig

如果添加了必需的依赖项，则会出现无限循环。

如何避免此错误？

解决方法

这就是我的看法。

首先，我在我的react编码中也看到了'dependency missing'句子。如果我没看错，那是警告。也许您可以澄清。以我的经验，只要不影响最终输出，就可以忽略它。您必须记住，内置工具遵循规则和语义，但是您需要确定何时可以忽略警告。
第二，一旦添加了缺少的依赖关系（以摆脱警告），您实际上就是在useEffect内进行状态更改。通过重新定义，视图将再次呈现，并且您又回到了useEffect内部。因此，这就是为什么您遇到无限循环的原因。

解决方法是

暂时忽略警告。
如果您确实不希望看到警告，请重新设计组件或使用挂钩来确保每个组件/挂钩仅处理项目的一部分。

发生无限循环是因为

setPagingConfig更新useEffect
useEffect之所以重新运行，是因为pagingConfig发生了更改，因此在更新依赖项时发生了重新呈现的情况。
setPagingConfig更新useEffect

你去了，你有一个无限循环

只有在pagingConfig实际上具有不同的keywords.data.total

时，才应更新它。 ,

在这种情况下，方法是只更改状态（如果值已更改）：

const [keywords,setKeywords] = useState<Keyword[]>();
const [currentPage,pagingConfig,setPagingConfig] = usePaging();

useEffect(() => {
  const loadKeywords = async () => {
    const { current,pageSize } = pagingConfig;
    const newKeywords = await getKeywords(current as number,pageSize as number);
    if (newKeywords.data.data !== keywords) {
      setKeywords(newKeywords.data.data);
      setPagingConfig({
        ...pagingConfig,total: keywords.data.total,});
    }
  };
  loadKeywords();
},[currentPage,setPagingConfig]);

由于关键字未更改，因此在第二个迭代状态下不再更新。