再ログインする前にログインページが最初に表示される - 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するとあなたが約束してデータ処理を持っているあなたのcomponentWillMount()機能でintially ""

Answer 1

あるので、W/O /拒否解決するための約束を待ってレンダリングするために続けて反応します。あなたには、いくつかのフラグが定義されて持っている必要があり、空白ページまたは任意の負荷状態を表示するには

、例えば：

state: {loading: 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. 
} 

とcomponentWillMount()の約束が解決された後、falseに設定されます。拒否された場合も偽+何らかのエラーメッセージが同じ方法で返されます。

Answer 2

単純な理由は、ajaxリクエストが完了する前にコンポーネントがマウントされてレンダリングされているからです。典型的な解決策は、コンポーネントデータがフェッチされている間、何らかの種類のローディングインジケータを表示することです。

基本的には、コンポーネント状態またはレデューサーのいずれかに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 lifecycle読んお勧めします、これはあなたにcomponentWillMount、componentDidMountなどのライフサイクルフックのためのいくつかやっていいことといけないことに良い概要を示します。例えば

などたとえば、それcomponentWillMountではなく、コンポーネントデータのajaxリクエストの起動にcomponentDidMountを使用することをお勧めします。

希望すると便利です。