setLoginUser 不是函数

Question

我正在创建一个登录应用程序，当我点击登录按钮时收到一个错误（loginPage.js:33 Uncaught (in promise) TypeError: setLoginUser is not a function）这是 app.js

的代码

function App() {
  const [user,setLoginUser] = useState({})
return(
  <div className='App'>
<BrowserRouter>
  < Routes>
    <Route path="/homepage" element={user && user?._id? <Homepage /> : <Login setLoginUser={setLoginUser} />}/>
   
    <Route path="/login" element={<Login />} setLoginUser={setLoginUser}/>
    <Route path="/register" element={<Register />} />
  </Routes>
</BrowserRouter>
   
  </div>
)
}

这里是 loginPage.js 的代码，其中发生了错误

const Login = ({ setLoginUser }) => {
   const login = () => {
    axios.post("http://localhost:4000/login", user)
    .then(res => {
      alert(res.data.message)
      console.log(res.data.user)
      setLoginUser(res.data.user)
     navigate('/homepage')
   })
 }
}

Answer 1

您必须将 setLoginUser 函数传递给路由中的 Login 组件。

<Route path="/login" element={<Login setLoginUser={setLoginUser} />} />

Answer 2

你应该更换：

<Route path="/login" element={<Login />} setLoginUser={setLoginUser}/>

来自

<Route path="/login" element={<Login setLoginUser={setLoginUser}/>} />

我认为像在根元素中那样设置路径变量不是个好主意，但这应该可行。

为什么你有 <BrowserRouter> 和 <Routes>？

setLoginUser 不是函数

setLoginUser is not a function

javascript

authentication

reactjs

mern