componentWillReceiveProps 无限循环？

Question

我是新手，我想知道这是否正常。如果我在 componentWillReceiveProps 方法中放置一个 console.log，它只会无限地记录信息。我在 console.log 正下方有一个 if (this.props !== nextProps) {} 检查，所以实际上没有触发任何东西，但无限循环让我作为初学者感到担忧。有人可以解释一下这是否正常吗？

我将从我的代码中提取一些重要的片段。

// From the parent component

constructor(props: any) {
    super(props);
    this._handleChanged = this._handleChanged.bind(this);
    this._onSave = this._onSave.bind(this);
    this.state = { columns: {}, fieldsWithErrors: {}, loaded: false, loadedValues: {} };
}

componentDidMount() {
    RestUtil.get().then((response) => {
        // put in an if statement to check if response came back null
        this.state.loadedValues = response;
        this.setState({
            loadedValues: this.state.loadedValues,
            loaded: true
        });
    }, (error: any) => {
        alert(`There was a problem submitting your request: ${error}`);
        console.log(error);
    });
}

<MyDatePicker
    label="Label"
    name="Name"
    isrequired={false}
    onSelectDate={this._handleChanged}
    value={this.state.loadedValues["Name"]}
/>

// From MyDatePicker

public render() {
        return (
            <div>
                <DatePicker
                    label={this.props.label}
                    strings={DayPickerStrings}
                    placeholder='Select a date...'
                    value={this.state.date}
                    isRequired={this.props.isRequired}
                    onSelectDate={this._handleChange}
                />
            </div>
        );
    }

Answer 1

这里有一些问题可能会导致您所看到的情况。

你永远不应该在构造函数之外直接设置状态。在你的 componentDidMount 方法中做 this.state.value = something 是不正确的，因为你永远不应该设置状态除了使用 setState 之外，以任何方式使用 React 组件。
您不应使用与设置状态相同的方法读取状态。 React 的 setState 不会立即更改组件的状态 - 状态更改是分批处理的，合并在一起并在稍后应用。如果你想在状态改变时从状态中读取数据，你应该在 componentDidUpdate 方法中通过比较旧状态和新状态来完成。

如果您尝试直接更改状态，将会导致组件的生命周期出现一些问题，这可能是导致无限循环的原因。设置后立即从状态读取也可能无法获得您期望的值。

尝试查看 component lifecycle methods 并将您的代码重构为更惯用的代码。这可能会使问题消失。

componentWillReceiveProps 无限循环？

componentWillReceiveProps infinite loop?

reactjs

office-ui-fabric