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

这里有一些问题可能导致你所看到的。

您不应该直接在构造函数之外设置状态。在this.state.value = something方法中执行componentDidMount是不正确的，因为您永远不应该设置React组件的状态除了使用setState之外的任何其他方式。
您不应以与设置相同的方法读取状态。 React的setState不会立即更改组件的状态 - 状态更改将被批处理，合并在一起并在以后应用。如果要在状态发生变化时从状态中读取数据，则应通过将旧状态与新状态进行比较，在componentDidUpdate方法中执行此操作。

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

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

componentWillReceiveProps无限循环？

1 个答案: