即使依赖项没有更改，UseEffect 钩子也会继续执行。 （路由器.查询）

Question

useEffect(() => {
   console.log('apply filter');    
   const newFilters = {
     status: {
       values: { label: router.query.status, value: router.query.status },
     },
     // Add other filter properties here...
   };    
   setFilters(newFilters);
}, [router.query]);

即使依赖项没有更改，UseEffect 钩子也会继续执行。我用它来跟踪 router.query 中的变化

我调试到一定程度，它正在重新渲染，因为无论依赖项是否更改、状态是否设置以及组件再次挂载并陷入循环，useEffect 钩子都会在初始渲染中触发。我该如何解决这个问题？

Answer 1

如果依赖是一个对象，即使值相同，它也可能会改变。如果不是同一个参考。

在您的情况下，如果状态不是对象。您可以简单地避免使用对象作为依赖项。

这是一个例子。

// if you need other properties, write {status, key2, key3 ... }
const { status } = router.query

useEffect(() => {
   console.log('apply filter');    
   const newFilters = {
     status: {
       values: { label: status, value: status },
     },
     // Add other filter properties here...
   };    
   setFilters(newFilters);

// if you use more deps write [status, key2, key3 ... ]
}, [status]);