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

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)

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

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

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

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