更新

Question

我有一个表单，其中包含年，月，日的选择下拉列表。

glyphicon

我需要从这些值中创建日期并将它们存储在状态的bootstrap字段中。为此，我创建了另外三个属性<select onChange={(event) => this.mergeDate('day', event.target.value)}> <option value="1">1</option> ... </select> <select onChange={(event) => this.mergeDate('month', event.target.value)}> <option value="1">January</option> ... </select> <select onChange={(event) => this.mergeDate('year', event.target.value)}> <option value="1977">1e977</option> ... </select>，birthday和date_day。

date_mth

在选择下拉列表更改时，我创建了一个使用date_year函数合并值的函数，如下所示：

this.state =    {
                        name: '',
                        email: '',
                        birthday: '',
                        country: '',
                        date_day: '',
                        date_mth: '',
                        date_year: ''
                 }

在此函数中，第二个console.log显示最后一次onChange事件设置的日期。最后一个console.log在Date()中记录空值。我猜这个问题是因为mergeDate(type, value) { if (type === 'year') { this.setState({ date_year: value }) } if (type === 'month') { this.setState({ date_mth: value }) } if (type === 'day') { this.setState({ date_day: value }) } console.log('merging date now '); // --> Works! let newDate = new Date(this.state.date_year, this.state.date_mth, this.state.date_day); console.log(newDate); // --> successful, but shows date value of last onChange event this.setState({ birthday: newDate }); console.log(this.state); // --> {...., birthday: '', ....} }的{{1}}我还不明白。任何人都可以向我解释背后的原因和问题的解决方案吗？

==========

更新

根据Asad，birthday是asynchronous behavior，设置状态完成后要执行的任何操作都应该作为参数传递给setState函数。我试过了：

setState

这仍然给我相同的输出 - 显示最后一次onChange事件的日期值。我错过了什么？

======

解

解决方案是不单独传递函数，而是作为函数传递。

setState

Answer 1

setState是异步的，因为React经常批量状态更新以提高性能。这意味着您不能依赖setState之后的语句中的新鲜状态。如果您依赖于更改的顺序，则应该传递回调，如下所示：

mergeDate(type, value)
{
        function postUpdate() {
            // All of the code from after your if statements
        }
        if (type === 'year')  { this.setState({ date_year: value }, postUpdate) }
        if (type === 'month') { this.setState({ date_mth: value  }, postUpdate) }
        if (type === 'day')   { this.setState({ date_day: value  }, postUpdate) }

}

一般情况下，您应该只是事先进行所有计算，只需在函数末尾调用setState一次，并对状态进行所需的所有更改。

结合年，月和日在ReactJS中创建日期

更新

解

1 个答案: