リアクションでajax呼び出しが完了する前にコンポーネントのレンダリングを停止する方法

Question

私は親コンポーネントと子コンポーネントを持っています。 親コンポーネントでは、名前と電話番号をとるフォームがあり、サブミットを押すと、親コンポーネントがこれらの値を子に渡すようにします。

私は当初、私は唯一のフォームが表示されるようにしたいが、私は値を入れたときに小道具を使用して、AJAX呼び出しを行うし、フォーム

以下の表のように結果を表示したいのです子コンポーネントで

Enterキーを押します。フォームの下にテーブルを表示します。

ajaxが完了するまで、子コンポーネントのレンダリングを停止するにはどうすればよいですか？

私の子コンポーネントのコードは

class List extends React.Component{ 

    constructor(props) { 
     super(props); 
     this.state = { 

      page: '' 
     }; 

    getPageInfo(info) 
    { 

     var self=this; 

     var dataHasChanged = (this.props.info !== info) 

     if (dataHasChanged) { 
      this.setState({page: ''}); 

      //some ajax .done(function(data){ 

       if (self.props.info === info) { 
         self.setState({ 
          page: data }); 
       } 

      }); 
     } 
    } 

    componentWillMount(){ 
     this.getPageInfo(this.props.info); 
     } 

    componentWillReceiveProps(nextProps){ 
     this.getPageInfo(nextProps.info); 
     } 


    render(){ 
    //something 
    } 

    } 

Answer 1

条件付きレンダリングが必要です。言い換えれば、コンポーネントの状態（おそらくthis.state.page）で何らかの値が存在するかどうかをチェックします。まだ存在しない場合は、何も表示しません。それがそこにあるとき、あなたはあなたが望むデータをレンダリングすることができます。

何かのように：でも

render() { 
    return (
     <div> 
     {this.state.page ? 
      <div>{this.state.page.somedata}</div> 
     : 
      <div>Loading...</div>} 
     </div> 
    ); 
} 

か：

render() { 
    if (!this.state.page) { 
     return <div>Loading...</div> 
    } 
    return (
     <div> 
      <div>{this.state.page.somedata}</div> 
     </div> 
    ) 

} 

Answer 2

であるあなたは、親コンポーネント内でAJAXリクエストを作る場合、あなただけの必要なデータの準備ができていない場合は、テーブルをレンダリングしないように反応する伝えることができます：

render() { 

    const table; 
    if (this.state.data) table = <table data=this.state.data />; 

    return table; 
} 

ノートがあなたのコードを見て：決してしない：

this.setState({ foo: '' }); 
this.setState({ foo: 1 }); 

SETSTATEが非同期である、あなたがかもしれないので、最終的にfooを''としてください。1