Question

我已经审核this，this和this链接以找到解决方案，但它们都不适用于我。

我有数组类型的decleared状态和null的其他状态。

this.state = {  from: '', to: '',journeyDate: '',searchDetails: [] }

当用户用源城市，目的地城市和旅程日期填写搜索表单时，我将如下设置这些状态。

    let from = this.state.from;
    let to = this.state.to;
    let journeyDate = moment(this.state.journeyDate).format('YYYY-MM-DD');

将这些所有变量推送到searchDetails数组状态的最后一步。为此，我尝试了以下选项，但没有一个工作。

选项1

this.setState({ searchDetails: [...this.state.searchDetails, from] });

选项2

this.setState(prevState => ({
            searchDetails: [...prevState.searchDetails, from]
        }))

选项3

let newState = this.state.searchDetails.slice();
        newState.push(from);

        this.setState({
            searchDetails: newState
        });
      console.log('final state is : ' + this.state.searchDetails);

每次控制台日志都为空时。

任何建议？

Answer 1

实际上setState是一种异步方法。这意味着在写setState之后，您不能指望立即更改状态。因此，console.log之后的setState可能会显示您上次state而不是新状态。如果要记录更新状态，请使用setState的回调，当状态更新时调用该回调

this.setState({ searchDetails: [...this.state.searchDetails, from] }, () => { 
    console.log(this.state.searchDetails)
});

Answer 2

尝试：

this.setState({
    searchDetails: newState // use any of your 3 methods to set state
},() => {
     console.log('final state is : ' + this.state.searchDetails);
});

setState（）并不总是立即更新组件。有可能   批量或推迟更新，直到稍后。

这使得阅读this.state   在调用setState（）之后发生了潜在的陷阱。

相反，使用   componentDidUpdate或setState回调（setState（更新程序，   回调）），其中任何一个都保证在更新后触发   已经应用。如果需要根据以前的状态设置状态   state，请阅读下面的updater参数。

详情请参阅：https://reactjs.org/docs/react-component.html#setstate

React - 如何在数组类型状态中添加新元素？

2 个答案: