为什么我的 NextJS 代码运行多次，如何避免这种情况？

Question

我一直在尝试连接 Web 应用程序的前端和后端，但遇到一个问题，当用户创建帐户时，会在数据库中创建该用户的多个对象。我使用console.log后发现我的 NextJS 代码是重复的。我发现这个稍微相关的帖子：组件函数运行多次反应 但是，它处理异步调用的问题，我已经通过空/未定义检查解决了这些问题。这是我当前的用户注册代码：

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

解决方案：在我的 Next 项目的根目录（package.json 所在的位置）中，还有一个名为next.config.js. 要为 Next 启用严格模式，您必须将对象更改nextConfig为包含reactStrictMode: true. 这是我的next.config.js作品：

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

module.exports = nextConfig

Answer 2

-> 在 React 中，由于严格模式，它可以将每个页面渲染两次（仅在开发环境中）。-> 所以我们可以通过从react中的index.js中删除这个严格模式包装器来删除严格模式启用。

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

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