ReactJSの別のコンポーネントからページリフレッシュをトリガする方法は？

Question

私はリアクションする初心者です。私のCRUDアプリケーションには、メインコンポーネントがあります。次にリストコンポーネントでは、サーバーからアイテムを読み込むためのAPI呼び出しを行います。問題は、新しいアイテムがに投稿された後にコンポーネントを作成した後、新しいアイテムを追加するためにリストを更新する必要があることです。可能な非フラックス溶液は何ですか？

Main.jsx

export default class Main extends React.Component { 
constructor(props, context) { 
    super(props, context); 

    this.state = { 
     showModal: false, 
    }; 

    this.openModal = this.openModal.bind(this); 
    this.closeModal = this.closeModal.bind(this); 
} 

openModal() { 
    this.setState({showModal: true}); 
} 

closeModal() { 
    this.setState({showModal: false}); 
} 

render() { 
     return (
      <div> 
       <div class="navbar"> 
        <div class="nav-item"onClick={this.openModal}>Create</div> 
       </div> 

       <div class="modal" show={this.state.showModal} onHide={this.closeModal}> 
        <div class="modal-body"> 
         <Create onItemCreate={this.closeModal}/> 
        </div> 
       </div> 

       <List /> 

      </div> 
     ); 
    } 
} 

UPDATE：あなたのコントロールは、あなたがチェックできるページを作成するために達する

List.jsx

export default class List extends React.Component { 

constructor(props, context) { 
    super(props, context); 

    this.state = { 
     items: [] 
    }; 
} 
refreshList() { 
    $.ajax({ 
     url  : apiPrefix, 
     dataType : 'json', 
     type  : 'GET', 

     success: data => { 
      this.setState({items: data.items}); 
     }, 

     error: (xhr, status, err) => { 
      console.error(apiPrefix, status, err.toString()); 
     } 
    }); 
} 

render() { 
    if(this.state.findings === undefined) { 
     return <div>Loading...</div> 
    } else { 
     return(
      <div> 
       <div> 
        { 
         this.state.findings.map((item) => { 
          return <Item key={item._id} item={item} /> 
         }) 
        } 
       </div> 
      </div> 

     ); 
    } 
} 

componentWillMount() { 
    this.refreshList(); 
} 

} 

Create.jsx

export default class Create extends React.Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { 

     }; 
    } 

    // Perform a post request to save a formData 
    onSubmit({formData}) { 
     formData.type = this.state.selectValue; 
     axios.post(apiPrefix, formData) 
      .then(() => { 
       this.closeModal(); 
       // THIS LIST NEED TO BE REFRESHED 
      }); 
    } 

    closeModal() { 
     this.props.onFindingCreated(); 
    } 


    render() { 
     return (
      <div> 
       <div class="form"></div> 
      </div> 
     ) 
    } 
} 

Answer 1

条件付きでレンダリング： -

あなたの作成ページが最初

render{ 
if(var==null) //will load your var when this class will run first 
{ 
var=this.props.onItemCreate.showModal 
return().. 
} 
else if(this.props.onItemCreate.showModal!=var and var!=null) 
{ 
var=[] //empty variable and update it to new props 
var=this.props.onItemCreate.showModal 
} 
} 

それとも あなたの子供のクラスで componentWillReceivePropsを使用し、小道具を持っているかどうかを確認することができますがロードされますとき最初にあなたの状態を格納する変数を作成します。更新されただけでその小道具とそのあなたのリストにもあなたの状態を設定します