为什么我的NextJS代码多次运行，如何避免这一点？

Question

我一直试图连接我的前端和后端的一个get应用程序，我有一个问题，当一个用户创建一个帐户，多个对象的用户被创建在数据库中。我使用了console.log，发现我的NextJS代码是重复的。我找到了一个与此略有关联的帖子：Component functions runs multiple times react，但是它处理异步调用的问题，我已经用空/未定义的检查解决了这些问题。这是我当前的用户注册代码：

const handleUser = async (user) => {
  var bUserExists = false

  await axios.get(GET_USER(user.email))
    .then(response => {
      bUserExists = true;
    })
    .catch(err => {
      bUserExists = false
    })

  if(!bUserExists) {
    bUserExists = true;
    await axios.post(CREATE_USER(), {
      email: user.email,
      name: user.name,
    }).then(newUser => {
      console.log(newUser.data)
      if(newUser.data) {
        router.push('/form/p1')
      }
    }).catch(err => {
      console.log(err)
    })
  }
}

const { user, error, isLoading } = useUser();
  
if(isLoading) return <div>Loading...</div>;
if(error) return <div>{error.message}</div>;
if(user) {
  // try to get the user from the database
  // if the user doesn't exist, create one
  handleUser(user)
}

当我用这个代码创建一个用户时，我的后端输出如下：

(对不起，我还没有足够的代表发布图片;-；) https://i.gyazo.com/fd83cf9362b0e88977dfb277687ca071.png

很奇怪对吧？它的重复速度如此之快，以至于当第二个调用出现时，用户甚至还没有创建。

我得出的结论是，NextJS在客户端和服务器上重复代码，但是我对Next/React的了解太少了，不太准确。为什么我的代码(应该只运行一次)多次运行？

Answer 1

由于严格的模式，->处于反应状态，它使每个页面呈现两次(仅在开发环境中)。->，因此我们可以通过从react中的index.js中移除这个严格的模式包装来删除严格的模式启用。

​

<React.StrictMode>
    <div>
      <ComponentOne />
      <ComponentTwo />
     </div>
 </React.StrictMode>

​

->和next.js是基于react的，所以您必须找到如何在next.js中禁用严格模式的方法，这里是官方文档链接禁用严格模式next.js 1：https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

Answer 2

解决方案:在我的下一个项目( package.json所在的地方)的根目录中，还有一个名为next.config.js的文件。要启用Next的严格模式，必须将对象nextConfig更改为包含reactStrictMode: true。下面是我的next.config.js，它可以工作：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig