在收到道具之后在孩子中设置状态？

Question

我有两个组成部分.一个是UserBase,在其上调用ajax请求以获取值.获取这些值并在标题状态下更新.

另一个组件是Header.它是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)

组件接收新道具时调用.初始渲染不会调用此方法.

使用此作为通过使用this.setState()更新状态来调用render()之前对prop转换作出反应的机会.可以通过this.props访问旧道具.在此函数中调用this.setState()不会触发其他渲染.

因此,您的Header组件将具有与其中类似的功能(未经测试):

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