未处理的拒绝（TypeError）：setToken 不是函数

Question

在尝试为用户设置令牌以登录应用程序时，我遇到了 React 问题。 我按照此处的步骤创建了一个登录过程，但它给出了 Unhandled Rejection (TypeError): setToken is not a function error，我无法更正它。

以下是从 app.js 开始的相关代码

 import React from 'react'; import { useState } from 'react'; import Login from './Pages/Login.js'; import Signup from './Pages/Signup'; import Dashboard from './Pages/Dashboard.js'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import useToken from './Pages/useToken' function App() { const { token, setToken } = useToken(); if (!token) { return <Login setToken={setToken} /> }; return ( <div className=""> <BrowserRouter> <Switch> <Route exact path="/"> <Login /> </Route> <Route exact path="/dashboard"> <Dashboard /> </Route> <Route exact path="/signup"> <Signup /> </Route> </Switch> </BrowserRouter> </div> ); } export default App;

登录.js

 import React from 'react'; import { useState } from 'react'; import PropTypes from 'prop-types'; async function loginUser(credentials) { return fetch('http://localhost:8080/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) .then(data => data.json()) } const Login = ({setToken}) => { // username is email address const [username, setUsername] = useState(); const [password, setPassword] = useState(); const handleSubmit = async(e) => { e.preventDefault(); const token = await loginUser({ username, password }); setToken(token); }; return (<> <section> <div className="flex items-center justify-center flex-col"> <div className="w-11/15 mt-24 rounded-lg flex flex-col items-center justify-center relative"> <span className="flex flex-col lg:flex-row"> <header className="text-5xl pr-4">Welcome to </header> <header className="font-LoveloLine text-6xl font-bold text-center"> Mused</header> </span> </div> </div> </section> <section> <div className="flex items-center justify-center flex-col"> <div className=" lg:w-2/4 px-4 rounded-lg flex flex-col items-center justify-center relative" > <div className="py-12"> <form action="" className="flex flex-col gap-2" onSubmit={handleSubmit}> {/* Email address */} <label htmlFor=""></label> <input className="w-96 text-brand-Black bg-white border-brand-Blue rounded-lg py-3 focus:outline-none focus:ring-2 focus:ring-brand-Red focus:border-transparent" type="email" name="" placeholder="Email address" id="" onChange={(e) => { setUsername(e.target.value)}} /> <label htmlFor=""></label> {/* Password */} <input className="w-96 bg-white text-brand-Black border-brand-Blue rounded-lg py-3 focus:outline-none focus:ring-2 focus:ring-brand-Red focus:border-transparent" type="password" name="" placeholder="Password" id="" onChange={(e) => { setPassword(e.target.value)}} /> <div class="max-w-sm mx-auto py-4"> <label class="inline-flex items-center"> <input class="text-brand-Blue w-6 h-6 mr-2 focus:ring-indigo-400 focus:ring-opacity-25 border border-gray-300 rounded" type="checkbox" /> Remember me </label> </div> {/* Login button */} <div> <button type="submit" className="bg-brand-Blue rounded-full w-full py-2 active:bg-brand-Blue-dark hover:bg-brand-Blue-dark">Login</button> </div> </form> {/* Checkbox */} {/* Signup button */} <div className="flex flex-col items-center justify-center "> <p className="py-6">or</p> <button type="submit" className="bg-brand-Red rounded-full w-full py-2 active:bg-brand-Red-dark hover:bg-brand-Red-dark">Signup </button> </div> </div> </div> </div> </section> </> ) }; Login.propTypes = { setToken: PropTypes.func.isRequired, } export default Login

Login.js 文件“setToken(token)”函数抛出错误。 它不应该是一个功能

 import { useState } from 'react'; const useToken = () => { const getToken = () => { const tokenString = localStorage.getItem("token"); const userToken = JSON.parse(tokenString); return userToken?.token }; const [token, setToken] = useState(getToken()); const saveToken = (userToken) => { localStorage.setItem("token", JSON.stringify(userToken)); setToken(userToken.token); } return { setToken: saveToken, token } } export default useToken

Answer 1

在我自己的情况下，我发现我在登录路由中传递了 setToken 函数，如下所示：

<Route path='/login setToken={setToken} />而不是

 <Route path='/login' exact element={<Login 
                    setToken={setToken}
                    />}
                    />

您必须将其传递给组件本身，而不是路由！

Answer 2

您将其发布为仅在组件内，一旦您转到它忽略它的路线。 所以从localhost:3000它会正常工作，但因为你没有通过路由setToken={token}它会忽略它。 在这几个小时里挠了我的头。