reactjs - 当我尝试使用 next.js 运行我的服务器时，我不断收到无效的钩子调用，但是当其他人克隆我的 repo 时，它在他们的 repo 上渲染得很好

Question

就像标题所说的那样，我正在构建一个应用程序，它最初使用一个使用 React 钩子制作的简单登录表单进行渲染，其中一个简单的布局组件将表单夹在中间。当我运行 npm run dev 时，localhost:3000 告诉我我正在使用无效的挂钩调用。我让几个人检查了代码，他们看不出有什么问题，他们能够克隆我的 repo 的 master 分支并运行服务器没有任何问题，所以我很确定代码本身不是问题。我也不确定如何复制这个问题，因为其他人在运行服务器时没有收到错误，它只是在我的系统上。谁能建议我能做些什么来解决这个问题？

import React, { useState } from 'react';
import axios from 'axios';
import Router from 'next/router';

//makes the request to the db to verify usename/password and stores data to localstorage
const signInAPI = async user => {
  return axios
    .post('/api/login', {
      username: user.username,
      password: user.password
    })
    .then(response => {
      localStorage.setItem('userToken', response.data.token)
      localStorage.setItem('name', response.data.name)
      localStorage.setItem('authLevel', response.data.authLevel)
      localStorage.setItem('id', response.data.id)
      return response.data
    })
    .catch(err => {
      console.log(err)
    })
}

const SignIn = function() {
  const [data, setData] = useState({
    username: '',
    password: ''
  })

  const handleInputChange = event => {
    const { name, value } = event.target
    const newData = {
      [name]: value
    }
    setData({ ...data, ...newData}) 
  }

  const handleFormSubmit = event => {
    event.preventDefault();

    const user = {
      username: data.username,
      password: data.password
    }

    signInAPI(user).then(res => {
      if(res) {
        Router.push('.home')
      }
    })
  }

  return (
    <div className="ui middle aligned center aligned grid">
      <div className="column">
        <h2 className="ui image header">
          <div className="content">
          Sign-in to your account
          </div>
        </h2>
      <form className="ui large form">
        <div className="ui stacked segment">
          <div className="field">
            <div className="ui left icon input">
              <i className="user icon"></i>
              <input type="text" name="username" placeholder="username" value={data.username} onChange={handleInputChange} />
            </div>
          </div>
        <div className="field">
          <div className="ui left icon input">
            <i className="lock icon"></i>
            <input type="password" name="password" placeholder="Password" value={data.password} onChange={handleInputChange} />
          </div>
        </div>
        <div className="ui fluid large submit button" onClick={handleFormSubmit}>Login</div>
      </div>

      <div className="ui error message"></div>

      </form>

    </div>
  </div>
  )

};

export default SignIn

标签： reactjsnext.js