ReactJS useEffect依赖项警告导致infinite循环

在我的功能组件中，我有状态，每当它改变时，我想做一些事情。所以我使用了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

const[keywords，setKeywords]=useState（）；
const[currentPage，pagingConfig，setPagingConfig]=usePaging（）；
useffect（（）=>{
const loadKeywords=async（）=>{
const{current，pageSize}=pagingConfig；
const keywords=wait getKeywords（当前为数字，页面大小为数字）；
设置关键字（关键字.数据.数据）；
设置分页配置({
…分页配置，
总计：关键字.data.total，
});
};
loadKeywords（）；
}，[currentPage]）；//需要添加pagingConfig和setPagingConfig

如果添加了所需的依赖项，我将得到无限循环

---

如何避免此错误？

以下是我的看法

• 首先，我在react编码中也看到了“dependency missing”这句话。如果我没有错的话，这是一个警告。也许你可以澄清一下。根据我的经验，你可以忽略它，只要它不影响你的最终输出。您必须记住，内置工具遵循规则和语义，但您需要决定何时可以忽略警告

• 第二，一旦添加了缺少的依赖项（以消除警告），本质上就是在useEffect中进行状态更改。通过定义，视图将再次渲染，您将回到useEffect中。这就是为什么你会得到一个无限循环

解决办法是,

• 暂时忽略警告
• 如果您真的不希望出现警告，请重新设计组件或使用挂钩，以确保每个组件/挂钩只处理项目的一部分

---

无限循环之所以发生，是因为

• setPagingConfig

  更新

  useffect

• useffect

  重新运行，因为

  pagingConfig

  已更改，因此会使用更新的依赖项重新加载

• setPagingConfig

  更新

  useffect

好了，你有一个无限循环

---

如果

pagingConfig

实际具有不同的

关键字.data.total

则只应更新

pagingConfig

，在这种情况下，方法是仅在值发生更改时更改状态：

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, pagingConfig, setPagingConfig]);

const[keywords，setKeywords]=useState（）；
const[currentPage，pagingConfig，setPagingConfig]=usePaging（）；
useffect（（）=>{
const loadKeywords=async（）=>{
const{current，pageSize}=pagingConfig；
const newKeywords=wait getKeywords（当前为数字，页面大小为数字）；
if（newKeywords.data.data！==关键字）{
setKeywords（newKeywords.data.data）；
设置分页配置({
…分页配置，
总计：关键字.data.total，
});
}
};
loadKeywords（）；
}，[currentPage，pagingConfig，setPagingConfig]）；

---

这样，第二次迭代状态不再更新，因为关键字没有更改。
这是错误还是ESlint警告？发生这种情况的原因是

setPagingConfig

更新

useffect

中的状态，然后

useffect

重新运行，因为

pagingConfig

已更改，然后

setPagingConfig

更新

useffect

中的状态... 你明白了。仅当pagingConfig实际具有不同的

关键字.data.total

时，才应更新它。它是一个ESLint警告，需要谨慎使用特定警告。很多时候，它可以甚至必须被忽略。没有它，你的代码运行得很好，不是吗？我不确定原因是什么，但我认为可能是如果通过const声明函数，ESLint不会立即正确识别它