Javascript 组件将在child Donds'；在父级中设置state（）时无法接收新道具

我在React中有一个名为“App”的父组件，它用HighCharts实现呈现一个“carries”子组件

我期望的是，根据React生命周期，父级呈现子组件，然后调用componentDidMount（）。然后，我使用一个fetch异步获取数据，一旦完成，就用一个user对象设置state的父对象。然后它将使用user={this.state.user}重新呈现子组件，并且它将在子组件中可用。但是当我在子组件WillReceiveProps中记录this.props时，用户对象不存在。因此，子组件日志中的这一行“未定义”：

这是我的全部代码：

const App = React.createClass({
//parent component to render all elements and hold state
    getInitialState(){
        return{
            user: {},
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
             }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        };
    },

    componentDidMount: function(){

      const fb_id = location.pathname.replace("/users/","");

      fetch("https://someurl.com/usersdata/" + fb_id)
        .then(rsp => rsp.json())
        .then(json => {
            if(json.error && json.error.message){
                throw new Error(json.error.message);
            } 
            this.setState({user:json}, ()=>{
                console.log("state updated");
                console.log(this.state);
            });
        });

    },

    render: function(){
        return (
            <div className="container">
                <div clasNames="row">
                    <div className="col-xs-12">
                         {/*Send this.state.user data from fetch to child component*/}
                         <Calories series={this.state.series} user={this.state.user}/>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-7">
                        <div className="bottom-left" id="weight-line-chart">
                            <Weight/>
                         </div>
                    </div>
                    <div className="col-xs-5">
                        <div className="bottom-right" id="avg-calories-pie-chart">
                            <AverageCal/>
                        </div>
                    </div>
                </div>
        </div>
        );
    }

});

//Calories Line chart
const Calories = React.createClass({

    componentDidMount: function(){

        const series = this.props.series;

        console.log("component Did Mount");
        console.log(this.props);

        $(function () { 
            const myChart = Highcharts.chart('calories-line-chart', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Your Calories Over Time'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: series
            });
        });

    },

    componentWillReceiveProps: function(){

        const series = this.props.series;

        console.log("component Will Receive Props")
        console.log(this.props);

        $(function () { 
            const myChart = Highcharts.chart('calories-line-chart', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Your Calories Over Time'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: series
            });
        });

    },

   render:function(){
       return(
            <div>
                <h3>Calories Intake</h3>
                <div className="top" id="calories-line-chart">

                </div>
           </div>
        );
   }
});

const App=React.createClass({
//父组件渲染所有元素并保持状态
getInitialState（）{
返回{
用户：{}，
系列：[{
姓名：'简'，
数据：[1,0,4]
}, {
姓名：'约翰'，
数据：[5,7,3]
}]
};
},
componentDidMount:function（）{
const fb_id=location.pathname.replace（“/users/”，”）；
取回（“https://someurl.com/usersdata/“+fb_id）
.then（rsp=>rsp.json（））
。然后（json=>{
if（json.error&&json.error.message）{
抛出新错误（json.Error.message）；
} 
this.setState（{user:json}，（）=>{
控制台日志（“状态更新”）；
console.log（this.state）；
});
});
},
render:function（）{
返回(
{/*将this.state.user数据从fetch发送到子组件*/}
);
}
});
//卡路里折线图
常量卡路里=React.createClass({
componentDidMount:function（）{
const series=this.props.series；
log（“组件未安装”）；
console.log（this.props）；
$（函数（）{
const myChart=Highcharts.chart（'carries-line-chart'{
图表：{
类型：“行”
},
标题：{
文字：“你的卡路里随时间变化”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：系列
});
});
},
componentWillReceiveProps:function（）{
const series=this.props.series；
日志（“组件将接收道具”）
console.log（this.props）；
$（函数（）{
const myChart=Highcharts.chart（'carries-line-chart'{
图表：{
类型：“行”
},
标题：{
文字：“你的卡路里随时间变化”
},
xAxis：{
类别：[‘苹果’、‘香蕉’、‘橙子’]
},
亚克斯：{
标题：{
文字：“吃水果”
}
},
系列：系列
});
});
},
render:function（）{
返回(
卡路里摄入量
);
}
});

---

任何人都可以帮助我，我做错了什么？

组件将接收道具

在更新子组件（父组件内部）的值时被调用，您需要在此

生命周期

方法中将新值作为参数接收，如下所示：

componentWillReceiveProps: function(newProps){ //here
    console.log("component Will Receive Props", newProps); //it will log the new values
    ...
}

this.props

内部

组件将接收props

将具有以前的值，并将在此

生命周期

方法之后更新。如果在

render

中执行

console.log（this.props）

，您将看到更新的值

为什么我们需要接收新值作为参数

我认为原因是（不确定），每当我们在父组件中执行

setState

时，就会调用此方法，而不管它是否与子组件相关，因此我们需要在子组件中执行任何任务之前放置一些逻辑（新道具和旧道具是否相同），因此，

this.props

将在此方法中包含旧值

有关

组件willreceiveprops

this.setState（{user:json}）

直接设置为您收到的json的更多详细信息，请查看。应该是

json.username

还是什么？类似这样的东西->

this.setState（{user:json.username}）

。

componentWillReceiveProps: function(newProps){ //here
    console.log("component Will Receive Props", newProps); //it will log the new values
    ...
}