Question

在我的react项目中，componentWillReceiveProps（）函数似乎被调用了两次，但不确定问题是什么。

这是代码。

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>
    );
}
}

我打算在componentWillReceiveProps（）中读取msgs.length，我遇到了以下问题。

msgs.length是不确定的

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

请帮帮我。

Answer 1

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

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

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

Answer 2

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

增长阶段以三种不同的方式触发：改变道具，改变状态或调用forceUpdate（）。

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

还需要考虑的是setState方法实际上是一个异步函数。因此，当状态设置发生时，它将导致另一次重新渲染。

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

您是否可能使用nextProps.user.messages而不是this.props.user.messages？

componentWillReceiveProps似乎被调用了两次

2 个答案: