Javascript 设置状态后如何直接呈现状态？

简介：我对ReactJS非常陌生（我一周前才开始），但我不会以此为借口，所以如果有什么我不理解的地方，请对我严厉一点

摘要：我正在尝试实现受保护的路由

Background：在安装受保护的路由组件时，

componentDidMount（）

调用名为

isAuthenticated（）

的函数，该函数更改名为

isAuthenticated

的字段的状态。我正在检查该字段，以确定用户是否看到受保护的组件或是否被路由回登录页面

问题：每次我访问受保护的路由aka

CreatePost

，我的日志显示，

isAuthenticated（）

在

componentDidMount（）

之后被调用，但我不确定为什么我的UI没有反映这些新的更改，以向用户显示经过身份验证的路由

问题：是否有人能提供帮助或推荐一个我没有考虑过的更好的策略？我真的很感激

注意：如果我在构造函数中声明

this.state.isAuthenticated

字段为true，我将看到我的受保护路由，但这不是我的预期目标。希望这有助于诊断问题

App.js:

import React, {Component} from 'react'
import './App.css'

import Signup from './components/Signup'
import Login from './components/Login'
import Feed from './components/Feed'
import CreatePost from './components/Createpost' 
import ProtectedRoute from './components/Protectedroute'

import {
    BrowserRouter as Router,
    Switch,
    Link,
    Route,
    Redirect
} from 'react-router-dom'


class App extends Component {
    render() {
        return(
            <Router>
                <div>
                    <Link to ='/signup'>Signup</Link>
                    <br />
                    <Link to = '/login'>Login</Link>
                    <br />
                    <Link to ='/create-post'>Create Post</Link>
                    <br />
                    <Link to ='/feed'>Feed</Link>
                </div>
                <Switch>
                    <Route path = '/signup' component = {Signup} />
                    <Route path = '/login' component = {Login} />
                    <Route path = '/feed' component = {Feed} />
                    <ProtectedRoute path = '/create-post' component = {CreatePost} />
                </Switch>
            </Router>
        )
    }
}

export default App

import React，{Component}来自“React”
导入“./App.css”
从“./components/Signup”导入注册
从“./components/Login”导入登录名
从“./components/Feed”导入源
从“./components/CreatePost”导入CreatePost
从“./components/ProtectedRoute”导入ProtectedRoute
进口{
BrowserRouter作为路由器，
转换
链接
路线,，
重新使用
}从“反应路由器dom”
类应用程序扩展组件{
render（）{
返回(
报名


登录


创建帖子


喂
)
}
}
导出默认应用程序

ProtectedRoute.js

import React, {Component} from 'react'
import { Redirect } from 'react-router-dom'


class ProtectedRoute extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAuthenticated: false
        }

        this.isAuthenticated = this.isAuthenticated.bind(this)
    }

    componentDidMount() {
        console.log('--componentDidMount--')
        this.isAuthenticated()
    }

    isAuthenticated() {
        console.log('--isAuthenticated--')
        this.setState({isAuthenticated: true})
    }
    render() {
        const Component = this.props.component

        return this.state.isAuthenticated ? (<Component />) : (<Redirect to = '/login' />)
    }
}

export default ProtectedRoute

import React，{Component}来自“React”
从“react router dom”导入{Redirect}
类ProtectedRoute扩展组件{
建造师（道具）{
超级（道具）
此.state={
I验证：错误
}
this.isAuthenticated=this.isAuthenticated.bind（this）
}
componentDidMount（）{
console.log（'--componentDidMount--'）
这是经过身份验证的（）
}
未经验证（）{
console.log（'--isAuthenticated--'）
this.setState（{isAuthenticated:true}）
}
render（）{
const Component=this.props.Component
返回this.state.isAuthenticated？（）：（）
}
}
导出默认的ProtectedRoute

这里的问题似乎是setState是异步的。发生的情况是，在第一次渲染中，this.state.isAuthenticated为false，因此会立即重定向。您可以引入加载状态，这将帮助您仅在解决加载和未验证状态后才延迟组件的呈现\重定向到。

---

通常，不要期望setState以同步方式立即更改状态。

不要在组件内部为该api调用设置状态，而是尝试创建一个函数，然后将api响应返回为true或success

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";

class ProtectedRoute extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false
    };

    this.isAuthenticated = this.isAuthenticated.bind(this);
  }

  componentDidMount() {
    console.log("--componentDidMount--");
    this.isAuthenticated();
  }

  isAuthenticated() {
    console.log("--isAuthenticated--");
    // Authentiction logic
    return true;
  }
  render() {
    const Component = this.props.component;

    return (
      <Route
        render={props =>
          this.isAuthenticated() ? (
            <Component {...props} />
          ) : (
            <Redirect to="/login" />
          )
        }
      />
    );
  }
}

export default ProtectedRoute;

import React，{Component}来自“React”；
从“react router dom”导入{Redirect，Route}；
类ProtectedRoute扩展组件{
建造师（道具）{
超级（道具）；
此.state={
I验证：错误
};
this.isAuthenticated=this.isAuthenticated.bind（this）；
}
componentDidMount（）{
log（“--componentDidMount--”；
此.isAuthenticated（）；
}
未经验证（）{
log（“--isAuthenticated-->”）；
//验证逻辑
返回true；
}
render（）{
const Component=this.props.Component；
返回(
是否已验证此.isAuthenticated（）(
) : (
)
}
/>
);
}
}
导出默认的ProtectedRoute；

除了下面的注释外，您还可以将isAuthenticated的逻辑移到父级，并将其作为道具传递给protected，以便在状态发生更改时重新呈现应用程序，但问题的根源是setState的异步性质。