javascript - 重新渲染之前最初显示的登录页面 - Reactjs

Question

发生的情况是，当我的用户登录并刷新页面时，我的登录页面会短暂显示，然后再向他们显示实际页面。我希望同时显示一个空白页面或显示一个加载页面。实际上，我不太确定为什么它首先出现，因为我首先在 componentWillMount() 中进行了一些数据处理。

相关代码如下:

componentWillMount()
{
    let url = "src/php/login.php";

    axios.get(url, {
        params: {
            get_userid : ""
        }
    })
    .then( r => 
    {
        if (r.data)
        {
            console.log(r.data);
            this.props.dispatch({ type: "new_user_id", payload: { id: r.data } });
        }
    })
    .catch( error => console.log(error));       
}



render() {
    var { user_id } = this.props;
    if (!user_id)
    {
        return (
            <div>
                some login logic
                <button onClick={this.new_user_id}>New user</button>

                <div style={{color : "red"}}>
                    { this.state.error && "Could not validate username/password. Please check." }
                </div>

                <form onSubmit={this.handle_submit}>
                    <div>
                        Username: <input id="username" name="username" type="text" />
                    </div>
                    <div>
                        Password: <input id="password" name="password" type="password" />
                    </div>
                    <input type="submit" value="submit" />
                </form>
            </div>
        );
    }

    else
    {
        return (
            <div style={{padding: "0 5px"}}>
                User ID: {user_id}
                <div style={{padding: "5px 0"}}>
                    <Link activeClassName="active" className="default bottom-radius" to='main'>Main Menu</Link>
                    <Link activeClassName="active" className="default bottom-radius" to='search'>Search</Link>
                    <Link activeClassName="active" className="default bottom-radius" to="form">Form</Link>
                    <a className="bottom-radius" style={{ float: "right", color : "blue", backgroundColor: "red", padding: "5px", cursor : "pointer" }} onClick={this.logout}>Logout</a>
                </div>
                <div style={{paddingTop: "10px"}}>
                    {this.props.children}
                </div>

            </div>
        );
    }
  }

user_id 最初是 ""

Answer 1

在您的 componentWillMount() 函数中，您在 Promise 中进行数据处理，因此 React 会继续渲染，无需等待 Promise 解析/拒绝。

要显示空白页面或任何加载状态，您必须定义一些标志，例如:

状态:{加载:true}

您可以在组件的构造函数中添加加载状态标志，如下所示:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {loading: true};
  }
}

然后在你的渲染方法中检查状态:

render(){
   ...
   if(this.state.loading){
       return <div>Loading</div>;
   }
   ...
   // all your normal render stuff.
}

在promise解析后的componentWillMount()中，将加载设置为false，如果拒绝也以同样的方式设置为false+一些错误消息。