在Next-JS中，UseEffect()运行两次,我把一个空数组作为第二个参数，它没有帮助,怎么修？[副本]

egmofgnx 于 2023-05-06 发布在其他

关注(0)|答案(1)|浏览(262)

此问题已在此处有答案：

Why useEffect running twice and how to handle it well in React?（3个答案）
Why is my React component is rendering twice?（10个答案）
去年关闭。
在Next-JS中，UseEffect（）运行两次。我听说你需要把一个空数组作为第二个参数来解决React中的这个问题。在我的情况下，在Next-JS中，这不起作用。（据我所知，Next-JS基于React）。
我找到了一个方法：在next.config.js中设置reactStrictMode：false。它工作了，UserEffect被调用一次。
但是这个方法不适合我，因为。我需要使用React的严格模式。
_app.js：

import '../styles/globals.css';
import React, { useEffect, useState, useRef } from 'react';

function MyApp({ Component, pageProps }) {
  if (typeof window !== "undefined") {
    useEffect(() => {

      console.log('Component Did Mount') //called twice :c

    }, [])

  return <Component {...pageProps} />
}

export default MyApp

next.js

来源：https://stackoverflow.com/questions/71957848/in-next-js-useeffect-is-run-twice-i-put-an-empty-array-as-the-second-argumen

1条答案

按热度按时间

kjthegm61#

React.StrictMode用于在开发过程中提供帮助，那么为什么要担心双重执行呢？顺便说一下，钩子的规则说你不能把钩子放在循环或if语句中。
下面是这两个细节的代码示例：

NextJS配置React's Strict Mode编辑next.config.js文件

module.exports = {
    reactStrictMode: false,
}

1.将if语句移动到useEffect钩子中

import '../styles/globals.css';
import React, { useEffect, useState, useRef } from 'react';

function MyApp({ Component, pageProps }) {
    useEffect(() => {
    if (typeof window !== "undefined") {
        console.log('Component Did Mount') //called once :D
    }, [])

    return <Component {...pageProps} />
}

export default MyApp

赞(0）回复(0）举报 2023-05-06

我来回答

在Next-JS中，UseEffect()运行两次,我把一个空数组作为第二个参数，它没有帮助,怎么修？[副本]

1条答案

相关问题

热门标签

最新问答