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

Posted 2023-02-23

【中文标题】在孩子收到道具后设置状态？

【英文标题】：Set state in child after it will receive props?

【发布时间】：2016-11-26 00:12:47

【问题描述】：

我有两个组件。一种是调用 ajax 请求以获取值的 UserBase。何时获取这些值并更新标题状态。

另一个组件是 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;

用户基础组件

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;

【参考方案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 );
  

【讨论】：

如果我们使用中继？也可以使用它，但我担心在我们使用中继时是否还有其他更有效的方法？有什么想法吗？