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

【问题标题】：React - how to add new element in array type state?React - 如何在数组类型状态中添加新元素？
【发布时间】：2018-05-03 06:53:37
【问题描述】：

我推荐了 this 、 this 和 this 链接以找到解决方案，但它们都不适合我。

我已经清除了数组类型的状态和 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);

每次控制台日志都是空的。

有什么建议吗？

【问题讨论】：

你能提供你的组件的完整代码吗？另外，您检查和 from、to 和 JourneyDate 是否有值？我看到您从状态中获取这些值并更新数组（searchDetails），但是您将值推入状态的位置？
@Umesh from , to 和 JourneyDate 状态设置完美，我也安慰他们。所以没有问题。

标签： arrays reactjs state

【解决方案1】：

试试：

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(updater, 回调）），其中任何一个都保证在更新后触发已应用。如果需要根据前面的设置状态状态，请阅读下面的更新程序参数。

更多详情，请阅读：https://reactjs.org/docs/react-component.html#setstate

【讨论】：

在提交表单时，我想设置 searchDetails 状态，并希望在下一页中以 this.props.searchDetails 访问此设置。所以我的问题是我可以在下一页中获取 searchDetails 状态的值作为 this.props.searchDetails 吗？
阅读：stackoverflow.com/questions/43455200/…

【解决方案2】：

其实setState是一个异步方法。这意味着在写完setState 之后，你不能指望状态会立即改变。所以console.log 在setState 之后可能会显示最后一个state 而不是新状态。如果要记录更新的状态，请使用setState 的回调，当像这样更新状态时调用它

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

【讨论】：