next.js React节点/下一节点useEffect()始终调用两次

gtlvzcf8 于 2023-02-22 发布在 React

关注(0)|答案(3)|浏览(308)

我的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语句中存在“or”条件，并且始终填充corporateContext，它将再次触发。如果我不将corporateContext添加到if条件，则当上下文更改时，它不会触发useEffect，因为reinitializePage设置为false。我无法添加“&&“条件，因为这两个依赖项没有相互跟随。

因此，我如何确保当第一次触发发生时，以及当reinitializePage在useEffect中设置为false时，如何确保reinitialize页面从true更改为false后，不再触发它。

next.js

来源：https://stackoverflow.com/questions/69466353/reactjs-nextjs-useeffect-always-called-two-times

3条答案

按热度按时间

1zmg4dgp1#

您可以使用多个useEffect：

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

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

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

赞(0）回复(0）举报 2023-02-22

knsnq2tg2#

我也遇到过类似的问题，这个问题就是StrictMode。
对于NextJS，将reactStrictMode设置为假：

// next.config.js
   module.exports = {
     reactStrictMode: false, // ← this
   }

对于React，删除StrictMode块：

<StrictMode> 
  <App />
</StrictMode>

详情请参阅：https://beta.reactjs.org/reference/react/StrictMode

赞(0）回复(0）举报 2023-02-22

gab6jxml3#

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

const reinitializePageRef = useRef(true);

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

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

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

赞(0）回复(0）举报 2023-02-22

我来回答

next.js React节点/下一节点useEffect()始终调用两次

3条答案

相关问题

热门标签

最新问答