Question

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

    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的参数但是状态总是相同的（它工作得很好） for isValidTime）。当我在FormSection中更改位置并且TimeOfDate为1st时，我对isValidTime状态和isValidDate有同样的问题，它很好。所以我的项目可能有一些更大的问题，但也许有其他方法可以设置此状态或从DateRange或TimeOfDay传递参数？

Answer 1

我认为您的代码存在问题，即您正在this.state来电this.setState()内阅读。

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

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

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

react docs中的更多信息

Answer 2

请尝试从验证功能中删除...this.state

也许您在同一时间范围内调用两个验证功能？ React将多个setState函数合并为一个，所以有可能你有这样的东西：

设置newIsValidDate =＆gt;设置newIsValidTime 和 setOldIsValidTime

React，change state仅适用于一个函数

2 个答案: