尽管状态发生了变化，但反应不会重新渲染

Question

I have a parent component, App.js that contains some state and functions which it passes to its children through properties. One of these state values contained within App is a name , which is set whenever the User's access token is successfully verified.

name is passed to a child component, TopBar as a property:

<div className="App">
    <Topbar name={this.state.name} isLoggedIn={this.isLoggedIn}></Topbar>
</div>

App.isLoggedIn() checks document.cookie for a JsonWebToken, verifies it, and updates App state to set the value of name . isLoggedIn() is called from the child component TopBar like so:

class TopBar extends React.Component {
    constructor( props ) {
        super( props );
        [ ... ]
    }

    [ ... ]
    // This is the issue I believe, but I can't think of an alternative
    async componentDidMount() {
        let result = await this.props.isLoggedIn();
        this.setState({'login' : result});
    }

    render() {
return (
    { this.state.login &&
        <li className="nav-item">Welcome <a href="#account">{this.props.name}</a> | <a href="">Logout</a></li>
    }
    {!this.state.login &&
        <li className="navItem"><a href="#login" onClick={this.showModal}>Sign In</a></li>
    }
);

Problem being, when isLoggedIn() is called, the name property does change, however nothing re-renders until a reload of the webpage. Using react dev tools I can see that the proper name value is getting into TopBar as a property.

I understand that changing properties shouldn't trigger a re-render, but the properties are state in the parent component, so surely changing their values should trigger a re-render of the entire application?

Answer 1

Instead of making componentDidMount async you can outsource your code into a helper function

async checkIfUserIsLoggedIn() {
     let result = await this.props.isLoggedIn();
     this.setState({'login' : result});
}

componentDidMount() {
     checkIfUserIsLoggedIn()
}