javascript - react ，改变状态只适用于一个功能

Question

我的 React 应用程序有问题。我有 2 个组件(两个单独的选择器)的表单，我需要在日期不正确时更改组件状态。这是代码:

    constructor(props: EditFormProps) {
    super(props);

    this.state = {
        isValidDate: true,
        isValidTime: true
    } as EditFormState;

    this.validateDate = this.validateDate.bind(this);
    this.validateTime = this.validateTime.bind(this);
}

render() {
       return (
           <div>
                <FormSection title={FLIGHT_DATES} className="flight-dates">
                    <div>
                        <DateRange validateDate={this.validateDate} />
                    </div>
                    <div>
                        <TimeOfDate validateTime={this.validateTime} />
                    </div>
                </FormSection>
            </div>
        );
    }
}


private validateDate(isValidDate: boolean) {
    this.setState({
        ...this.state,
        isValidDate: isValidDate,
    } as EditFormState);
}

private validateTime(isValidTime: boolean) {
    this.setState({
        ...this.state,
        isValidTime: isValidTime,
    } as EditFormState);
}

当我只有一个像 validateDate 这样的函数时，它的 isValidDate 设置状态没有问题，但是当我有 2 个函数(validateDate 和 validateTime)时，我得到了 validateDate 的正确参数，但状态始终相同(它对 isValidTime 工作正常)。当我在 FormSection 中更改位置并且 TimeOfDate 是第一个时，我对 isValidTime 状态和 isValidDate 有同样的问题，它很好。所以我的项目中可能有一些更大的问题，但也许还有其他方法可以设置此状态或从 DateRange 或 TimeOfDay 传递参数？

Answer 1

我认为您的代码的问题在于您正在从 this.setState() 调用中的 this.state 读取数据。

在这种情况下，this.state 不能保证包含最新状态。

您应该将函数而不是对象传递给 this.setState()。例如:

private validateDate(isValidDate: boolean) {
  this.setState((prevState, props) => ({
    ...prevState,
    isValidDate: isValidDate
  })
}

更多信息在 react docs .