React登录功能报错Unhandled Rejection: setToken is not a function如何解决

错误原因 #

你遇到的setToken is not a function错误，根源是App.js中重复渲染了Login组件，且路由下的Login组件没有传递setToken属性：

1. 你在App组件中先做了token存在性判断，如果token不存在直接返回<Login setToken={setToken} />，这部分逻辑的属性传递是正常的
2. 但在后续路由配置中，根路径/对应的Login组件没有传递任何props：<Route exact path="/"><Login /></Route>
3. 当用户直接访问根路径时，触发的是路由规则中无props的Login组件，此时组件接收的setToken为undefined，调用时就会抛出类型错误。

修复方案（二选一即可） #

方案1：调整路由守卫逻辑，给路由内的Login传递props #

删除App组件开头的token判断直接返回Login的逻辑，在路由中添加全局权限校验，同时给Login传递setToken属性，修改后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, Redirect } from 'react-router-dom';
import useToken from './Pages/useToken'

function App() {
  const { token, setToken } = useToken();
  // 封装私有路由守卫，未登录时跳转到登录页
  const PrivateRoute = ({children, ...rest}) => {
    return <Route {...rest} render={() => token ? children : <Redirect to="/login" />} />
  }

  return (
    <div className="">
      <BrowserRouter>
        <Switch>
            <Route exact path="/login">
                <Login setToken={setToken} />
            </Route>
            <Route exact path="/signup">
                <Signup />
            </Route>
            <PrivateRoute exact path="/dashboard">
                <Dashboard />
            </PrivateRoute>
            {/* 根路径自动重定向到对应页面 */}
            <Route exact path="/">
                <Redirect to={token ? "/dashboard" : "/login"} />
            </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

方案2：保留现有token判断逻辑，删除路由中冗余的Login配置 #

如果你不想调整现有判断逻辑，直接删除路由中根路径对应的Login配置即可，避免重复渲染无props的Login组件：

// 从App.js的Switch标签内删除这段代码
<Route exact path="/">
    <Login />
</Route>

额外注意 #

Login组件中已经声明setToken是必填的PropType，属性缺失时开发环境控制台会先抛出PropType警告，日常开发可以优先关注这类警告，能提前定位属性传递问题。

内容的提问来源于stack exchange，提问作者Mert Deveci