1

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

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

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

1 回答 1

1

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

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

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

尝试检查组件生命周期方法并将代码重构为更惯用的东西。这可能会让问题消失。

于 2017-04-15T05:33:22.567 回答