Reactjs componentWillReceiveProps似乎被调用了两次

在我的react项目中，componentWillReceiveProps（）函数似乎被调用了两次，但不确定问题出在哪里

这是代码

import React，{Component，PropTypes}来自'React'；
...
类MessagesList扩展组件{
建造师（道具）{
超级（道具）；
此.state={
消息：“”，
信息：[]
};
...
组件willmount（）{
this.props.init_message（）；
};
组件将接收道具（下一步）{
这是我的国家({
消息：this.props.user.messages
});
var msgs=this.props.user.messages；
var total_group=[]；
var msg_group=[]；
var group_date=0；
设置超时（（）=>{
如果（MSG的类型！=“未定义”）{
对于（变量i=0；i{
返回(
{message.user}:{message.message}:{message.date}
)
})}
...
);
}
}

我打算阅读componentWillReceiveProps（）中的msgs.length，我得到了以下问题

msgs.length未定义

之后我得到了数组的值，所以我认为componentWillReceiveProps（）似乎被调用了两次。所以在第一次调用中，无法读取值，然后在第二次调用中，至少读取值

---

请帮助我。

在安装的组件接收新的道具之前，将调用componentWillReceiveProps。如果需要更新状态以响应道具更改（例如，重置道具），可以比较this.props和nextProps，并在此方法中使用this.setState（）执行状态转换

请注意，如果父组件导致组件重新渲染，即使道具没有更改，也会调用此方法。如果只想处理更改，请确保比较当前值和下一个值

---

您将从文档中获得详细信息。

在装入的组件接收新的道具之前，将调用componentWillReceiveProps。如果需要更新状态以响应道具更改（例如，重置道具），您可以比较this.props和nextProps，并在此方法中使用this.setState（）执行状态转换

请注意，如果父组件导致组件重新渲染，即使道具没有更改，也会调用此方法。如果只想处理更改，请确保比较当前值和下一个值

---

您将从文档中获得详细信息。

ComponentWillReceiveProps是React生命周期增长/更新阶段的一种方法

成长阶段以三种不同的方式触发：更改道具、更改状态或调用forceUpdate（）

您在componentWillReceiveProps中引用的值this.props.user.messages是当前值，而不是nextProps值

还需要考虑的是SETStand方法实际上是一个异步函数。因此，当该状态设置发生时，它将导致另一个ReReNER。

我怀疑，但如果没有更多的代码，我无法确定使用props的原始值调用setState一次，这会触发另一个更新周期。在下一个更新周期中，setState方法现在将状态设置为新的prop值

---

您是否打算使用nextrops.user.messages而不是此.props.user.messages？

组件将接收props是React生命周期增长/更新阶段的一种方法

成长阶段以三种不同的方式触发：更改道具、更改状态或调用forceUpdate（）

您在componentWillReceiveProps中引用的值this.props.user.messages是当前值，而不是nextProps值

还需要考虑的是SETStand方法实际上是一个异步函数。因此，当该状态设置发生时，它将导致另一个ReReNER。

我怀疑，但如果没有更多的代码，我无法确定使用props的原始值调用setState一次，这会触发另一个更新周期。在下一个更新周期中，setState方法现在将状态设置为新的prop值

---

您是否打算使用nextrops.user.messages而不是此.props.user.messages？

您如何使用

MessagesList

？父对象中的每次重新渲染都将触发子对象中的组件WillReceiveProps。您如何使用

MessagesList

？父对象中的每次重新渲染都将触发子对象中的组件WillReceiveProps小孩

import React, { Component, PropTypes } from 'react';
...

class MessagesList extends Component {

constructor(props) {
    super(props);
    this.state = {
        message: '',
        messages: []
    };

...

componentWillMount() {
    this.props.init_message();
};

componentWillReceiveProps(nextProps) {
    this.setState({
        messages: this.props.user.messages
    });
    var msgs = this.props.user.messages;
    var total_group = [];
    var msg_group = [];
    var group_date = 0;
    setTimeout(() => {
        if (typeof msgs != 'undefined') {
            for(var i = 0; i < msgs.length; i++) {
                ...
            }
        }                 
    }, 100);
};

render() {
    return (
        <div className="row">
            <div className="col-12">
                <div className="messages">
                    {this.state.messages.map(message => {
                        return (
                            <div>{message.user}: {message.message} : {message.date}</div>
                        )
                    })}
                </div>
            </div>
            ...
        </div>
    );
}
}