ReactJs/NextJs useEffect() 总是被调用两次

Posted 2023-03-17

【中文标题】ReactJs/NextJs useEffect() 总是被调用两次

【英文标题】：ReactJs/NextJs useEffect() always called two times

【发布时间】：2021-11-26 16:06:48

【问题描述】：

我的 useEffect() 钩子总是被调用两次。有两个依赖：reinitializePage（设置为true时会调用useEffect）和corporateContext（上下文改变时，组件应该更新）。

const [reinitializePage, setReinitializePage] = useState(true);

useEffect(() => 
  if (reinitializePage === true || corporateContext) 
      (async () =>  ... )();
      setReinitializePage(false);
  
, [reinitializePage, corporateContext]);

我明白为什么它总是触发两次。

reinitializePage默认设置为true，所以useEffect会触发

，修改为false后，由于reinitializePage是一个依赖，它会再次触发，因为if语句中有“或”条件，并且始终填充corporateContext ，它会再次触发。如果我不将corporateContext添加到if条件，那么当上下文更改时它不会触发useEffect，因为reinitializePage设置为false。我无法在 if 语句中添加“&&”条件，因为这两个依赖项没有相互遵循。

那么如何保证第一次触发发生时，以及useEffect里面reinitializePage设置为false时，如何保证reinitialize页面从true变为false后，不再触发。

【问题讨论】：

useEffect 不会根据您的 if 语句触发，它会在依赖关系时触发 - 在您的情况下是 reinitializePage 和 corporateContext- 更改。如果您不希望在 renitializePage 为 false 时触发异步函数，只需在 if 语句中使用 &&。

嗨，我知道它会在依赖项之一发生更改时触发。主要问题是它在 useEffect 方法下 reinitializePage 设置为 false 时触发，之后它会再次触发。我无法将其设置为 && 因为也有可能 reinitializePage 设置为 false 并且 CorporateContext 已更改。

【参考方案1】：

也许您可以将reinitializePage 存储在useRef 中：

const reinitializePageRef = useRef(true);

useEffect(() => 
  if (reinitializePageRef.current === true || corporateContext) 
      (async () =>  ... )();

      reinitializePageRef.current = false;
  
, [corporateContext]);

在这种情况下，如果 reinitializePageRef 更改，useEffect 将不会更新，因此如果您在其他位置设置此值，它可能不起作用。

【参考方案2】：

你可以使用多个useEffect：

const [reinitializePage, setReinitializePage] = useState(true);

useEffect(() => 
  if (reinitializePage === true) 
      (async () =>  ... )();
      setReinitializePage(false);
  
, [reinitializePage]);

useEffect(() => 
  if (corporateContext) 
      (async () =>  ... )();
      setReinitializePage(false);
  
, [corporateContext]);