Установить состояние у ребенка после получения реквизита?

Question

У меня есть два компонента. Один из них - UserBase, на который вызывается запрос ajax для получения значений. При получении этих значений и обновлении в состоянии заголовка.

Другой компонент - заголовок. Его дочерний компонент UserBase. Поэтому, когда государство обновляется, оно передает его дочернему компоненту.

Теперь проблема заключается в том, что я должен обновить состояние дочернего элемента, когда он получит реквизиты из компонента UserBase. Как я могу достичь этой функциональности.

Вот мой код

Заголовок Компонент

var React = require('react'); 
var Router = require('react-router'); 
import Auth from './Auth.js'; 
import PopupSmall from './PopupSmall.js'; 

var headerStyle = { 
    border:0 
} 

class Header extends React.Component{ 

    constructor(){ 
     super(); 
     console.log("constructor"); 
     this.state = {basicInfo : {}}; 
    } 

    // **some function which needs to tigger when this component will receive props** 

    popupChange(){ 
     console.log("============popupChange============"); 
     console.log(this.state); 
     Router.browserHistory.push("/dashboard"); 
    } 

    render(){ 
     if(this.props.basicInfo){ 

      return (
       <div> 
       {this.props.basicInfo.isAgency==1 ? <PopupSmall popupCallBack={this.popupChange.bind(this)} itemList={this.props.agencies} show='true' title='Agencies'/> : console.log()} 
      </div> 
      ) 
     } 

    } 
} 

export default Header; 

UserBase Компонент

import React from 'react'; 
import Header from './Header.js'; 
import Auth from './Auth.js'; 
import Loader from './Loader.js'; 

var Router = require('react-router'); 

class Base extends React.Component{ 
    constructor(){ 
     super(); 
     this.state = {basicInfo :[]}; 
    } 

    loadDataFromServer() { 
     var tokenId = Auth.getCookies("token"); 

     if(tokenId!=""){ 

      var data = { 
       token : tokenId 
      } 

      $.ajax({ 
       url: 'http://xxx.xxxxxxx.xxx/abc/cde', 
       dataType: 'json', 
       cache: false, 
       type : 'POST', 
       data : JSON.stringify(data), 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json' 
       }, 
       success: function(response) { 

       var info = { 
        compName : response.name, 
        firstName : response.fn, 
        isAgency : response.isAgeny 
       } 

       this.setState({basicInfo:info}, function(){ 
        //console.log(this.state.data); 
       }.bind(this)); 

       }.bind(this), 
       error: function(xhr, status, err) { 
       console.error("", status, err.toString()); 
       }.bind(this) 
      }); 
     } else { 
      Router.browserHistory.push('/login'); 
     } 
    } 

    componentDidMount() { 
     this.loadDataFromServer(); 
    } 

    render(){ 
     document.body.className="nav-md"; 

     return (

      <div className="container body"> 
       <div className="main_container"> 
        <Header basicInfo={this.state.basicInfo} /> 
       </div> 
      </div> 

     ); 
    } 
} 

export default Base; 

Answer 1

Если вы еще не, имеют Прочитали: https://facebook.github.io/react/docs/component-specs.html

Там одна функции, в частности, которые могут удовлетворить то, что вам нужно здесь:

componentWillReceiveProps (nextProps, nextState)

Вызывается, когда компонент получает новый реквизит. Этот метод не вызывается для первоначального рендеринга.

Используйте это как возможность реагировать на переход prop, прежде чем render() вызывается путем обновления состояния с помощью this.setState(). Доступ к старым реквизитам можно получить через this.props. Вызов this.setState() внутри этой функции не вызовет дополнительный рендеринг.

Таким образом, ваш компонент заголовка будет иметь функцию, аналогичную функции в нем следующее (непроверенные):

componentWillReceiveProps(nextProps) { 
    if (nextProps.basicInfo !== this.props.basicInfo) { 
    this.setState({ basicInfo: nextProps.basicInfo }); 
    } 
}