Setze den Status in einem Kind, nachdem es Requisiten erhalten hat?

Question

Ich habe zwei Komponenten. Eine ist UserBase, auf der eine Ajax-Anforderung zum Abrufen von Werten aufgerufen wird. Wenn diese Werte abgerufen und im Zustand der Kopfzeile aktualisiert werden.

Eine weitere Komponente ist Header. Es ist eine untergeordnete Komponente von UserBase. Wenn der Status aktualisiert wird, wird er an die untergeordnete Komponente übergeben.

Jetzt ist mein Problem, ich muss den Zustand des Kindes aktualisieren, wenn es die Requisiten von der UserBase-Komponente erhalten wird. Wie kann ich diese Funktionalität erreichen?

Hier ist mein Code

Header-Komponente

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 Komponente

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

Wenn Sie bereits nicht haben ein durchgelesen: https://facebook.github.io/react/docs/component-specs.html

Es gibt eine Funktion insbesondere die, was Sie hier möglicherweise anpassen müssen:

componentWillReceiveProps (nextProps, nextstate)

aufgerufen, wenn eine Komponente neue Requisiten empfängt. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.

Verwenden Sie dies als eine Gelegenheit, um auf einen Requisitenübergang zu reagieren, bevor render() aufgerufen wird, indem Sie den Zustand mit this.setState() aktualisieren. Auf die alten Requisiten kann über this.props zugegriffen werden. Wenn this.setState() innerhalb dieser Funktion aufgerufen wird, wird kein zusätzliches Rendern ausgelöst.

So wird Ihre Header-Komponente, die eine ähnliche Funktion wie das in ihm (ungetestet) folgenden Voraussetzungen erfüllt sein:

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