Node.js React组件在刷新之前不会更新

我有以下代码： 在App.js中：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            loggedStatus: {
                username: undefined,
                isLoggedIn: undefined,
            }
        }
    }

    componentDidMount() {
        let username = undefined;
        let isLoggedIn = undefined;
        if (localStorage.getItem("token")) {
            fetch("https://localhost:8000/user", {
                method: "POST",
                headers: {
                    "Authorization": `Bearer ${localStorage.getItem("token")}`
                }
            }).then(response => response.json()).then(response => {
                if (response.success) {
                    username = response.username;
                    isLoggedIn = true;
                } else {
                    username = undefined;
                    isLoggedIn = false;
                    localStorage.removeItem("token");
                }

                this.setState({
                    loggedStatus: {
                        username: username,
                        isLoggedIn: isLoggedIn
                    }
                })
            })
        }
    }

    render() {
        return (
            <div className="App">
                <Router>
                    <Navbar loggedStatus={this.state.loggedStatus}/>
                    <Switch>
                        <Route path="/register">
                            <RegisterForm />
                        </Route>
                        <Route path="/login">
                            <LoginForm />
                        </Route>
                    </Switch>
                </Router>
            </div>
        )
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
日志状态：{
用户名：未定义，
isLoggedIn:未定义，
}
}
}
componentDidMount（）{
用户名=未定义；
设isLoggedIn=未定义；
if（localStorage.getItem（“令牌”））{
取回（“https://localhost:8000/user", {
方法：“张贴”，
标题：{
“授权”：`Bearer${localStorage.getItem（“令牌”）}`
}
})。然后（response=>response.json（））。然后（response=>{
if（response.success）{
用户名=response.username；
isLoggedIn=真；
}否则{
用户名=未定义；
isLoggedIn=false；
localStorage.removietem（“令牌”）；
}
这是我的国家({
日志状态：{
用户名：用户名，
伊斯洛格丁：伊斯洛格丁
}
})
})
}
}
render（）{
返回(
)
}
}

在Navbar.js中：

logout = () => {
    localStorage.removeItem("token");
}

render() {
    return (
        <nav className="Navbar">
            {this.props.loggedStatus.isLoggedIn ? 
            <>
                <ul className="Navbar-list">
                    <li className="Navbar-item"> 
                        <span className="Navbar-greeting">Hello, {this.props.loggedStatus.username}</span>
                    </li>

                    <li className="Navbar-item">
                        <button className="Navbar-logoutBtn" onClick={this.logout}>Sign Out</button>
                    </li>
                </ul>
            </>
            :
            <>
            <ul className="Navbar-list">
                <li className="Navbar-item">
                    <Link to="/register" className="Navbar-link">Sign Up</Link>
                </li>
                <li className="Navbar-item">
                    <Link to="/login" className="Navbar-link">Log In</Link>
                </li>
            </ul>
            </>
            }
        </nav>
    )
}

logout=（）=>{
localStorage.removietem（“令牌”）；
}
render（）{
返回(
{this.props.loggedStatus.isLoggedIn？


你好，{this.props.loggedStatus.username}


退出


:


注册


登录


}
)
}

我遇到的问题是，我希望在用户登录或注销时更新我的navbar组件。使用我当前的代码，我必须刷新页面才能更新。我一直在胡闹，运气不好。我知道在整个过程中只调用一次componentDidMount，这就是为什么只在刷新时调用setState

编辑：登录

        fetch(`${this.apiURL}/user/login`, {
            method: "POST",
            body: JSON.stringify(user),
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json"
            }
        })
        .then(response => response.json())
        .then(response => {
            if (response.success) {
                status = {
                    statusMsg: <p className="LoginForm-statusMsg">{response.statusMsg}</p>
                }
                localStorage.setItem("token", response.token);
                this.setState({
                    status: status
                }, () => setTimeout(() => {
                    this.props.history.push("/");
                }, 5000));
            } else {
                status = {
                    statusMsg: <p className="LoginForm-statusMsg">{response.statusMsg}</p>
                }

                this.setState({
                    status : status
                })
            }
        });
    }
}

fetch（`this.apirl}/user/login`{
方法：“张贴”，
正文：JSON.stringify（用户），
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})
.then（response=>response.json（））
。然后（响应=>{
if（response.success）{
状态={
statusMsg:
{response.statusMsg}
}
setItem（“token”，response.token）；
这是我的国家({
状态：状态
}，（）=>设置超时（（）=>{
this.props.history.push（“/”）；
}, 5000));
}否则{
状态={
statusMsg:
{response.statusMsg}
}
这是我的国家({
状态：状态
})
}
});
}
}

因为我不知道您遵循的登录流程。但据我所知。下面的代码应该符合您的要求

在NavBar.js中

logout = () => {
    this.props.handleLogout()
}

在app.js中

handleLogout = () => {
 localStorage.removeItem("token");
  this.setState({
       loggedStatus: {
       username: undefined,
       isLoggedIn: false
      }
   })
}

render(){
return(
..
..
    <Navbar loggedStatus={this.state.loggedStatus} handleLogout={this.handleLogout}/>
)
}

handleLogout=（）=>{
localStorage.removietem（“令牌”）；
这是我的国家({
日志状态：{
用户名：未定义，
伊斯洛格丁：错
}
})
}
render（）{
返回(
..
..
)
}

状态将更改，以便重新渲染组件

希望这对您有所帮助。

设置状态（{}）始终强制重新渲染。（除非您在：shouldComponentUpdate（nextProps，nextState）中返回false），否则您可以通过将控制台日志放入来检查这一点

componentDidUpdate(prevProps, prevState) {
    console.log("Component did update")
}

目前尚不清楚JobsScreenTabs组件由什么组成，但请确保对于预期在JobsScreenTabs组件内部发生的更改，它实际上会更改其状态。从WorkshopJobsScreen组件传递属性，或直接在JobsScreenTabs组件中进行更改

同样重要的是：

正确使用状态 关于setState（），您应该知道三件事

不要直接修改状态 例如，这不会重新渲染组件：

// Wrong
this.state.comment = 'Hello';

相反，请使用setState（）：

React可以将多个setState（）调用批处理到一个更新中以提高性能

由于this.props和this.state可能会异步更新，因此不应依赖它们的值来计算下一个状态

父组件和子组件都不知道某个组件是有状态的还是无状态的，它们不应该关心它是定义为函数还是类

这就是为什么状态通常被称为局部或封装除了拥有和设置它的组件之外，任何组件都无法访问它。

因此，如果您希望在组件中进行更改，请确保操纵正确组件的状态

有关React生命周期的更多信息，请访问：

所以，只需一些一般信息。答案从这里开始：

你可以通过应用程序JST在道具中传递你的状态

// Correct
this.setState({comment: 'Hello'});

 let loggedStatus = {
   username: undefined,
   isLoggedIn: false
 }

<Route path="/" render={(props) => <NavBar props={loggedStatus} {...props} /> } exact />

export class NavBar extends Component {
    constructor(props) {
        super(props);
        console.log(props)

        this.state = {
            isLoggedIn: this.props.loggedStatus.isLoggedIn