重新提交前最初顯示的登錄頁面-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繼續呈現w / o，等待承諾解決/拒絕。

要顯示空白頁或任何加載狀態，您必須定義一些標志，例如：

state: {loading: true}

您可以像這樣在組件的構造函數中添加加載狀態標志：

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

然后在您的render方法中檢查狀態：

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

並在promise解析后將componentWillMount()加載設置為false，如果組件也拒絕為false +一些錯誤消息，則在componentWillMount() 。

Answer 2

簡單的原因是，在您的ajax請求完成之前已安裝並呈現了該組件。 一種典型的解決方案是在獲取組件數據時顯示某種加載指示器。

基本上，您需要在組件狀態或reducer中實現isLoading標志。

像這樣

const ExampleComponent extends Component() {
  constructor() {
    super(props)
    this.state = { isLoading: true }
  }
  componentWillMount() {
    // does and ajax operation, returns a promise
    fetchComponentData()
      .then(() => this.setState({ isLoading: false }))
  }
  render() {
    return (
      {
        this.props.user_id ? (
          <RegularContent />
        ) : (
          this.state.isLoading ? (
            <LoadingIndicator />
          ) : (
            <LoginForm />
          )
        )
      }
    )
  }
}

我還建議閱讀有關React Component生命周期的文章 ，這為您提供了一些關於生命周期掛鈎的重要事項的概述，例如componentWillMount ， componentDidMount等。例如，建議將componentDidMount用於啟動針對組件的任何Ajax請求數據，而不是componentWillMount 。

希望這可以幫助！