使用 React 扩展运算符在数组中设置状态答案

【问题标题】：SetState in an array with React spread operator使用 React 扩展运算符在数组中设置状态
【发布时间】：2018-12-09 15:50:19
【问题描述】：

我的反应状态中有一个值，如下所示：

appointmentsData = {
  "05-01-2018": [
    {
      id: "1",
      friendly: "9:00am - 10:00am",
      openDateTime: "9:00am",
      closeDateTime: "10:00am"
    }
  ]
};

我有一条新数据：

const newAppt = {"06-30-2018":[]}

如何添加我在该州的数据？我试过了

this.setState({ ...this.state.appointmentsData, ...newAppt});

它似乎没有添加到状态中。我在渲染中返回与以前相同的值（传播前的 appointmentData）。 newAppt 永远不会被添加到状态中。

我正在尝试让我的状态所需的输出为：

appointmentsData = {
  "05-01-2018": [
    {
      id: "1",
      friendly: "9:00am - 10:00am",
      openDateTime: "9:00am",
      closeDateTime: "10:00am"
    }
  ],
  "06-30-2018": []
};

【问题讨论】：

您所在的州究竟是什么样的？您的浏览器是否支持 object-rest-spread（或者您是否使用 babel 插件）？

标签： javascript reactjs spread-syntax

【解决方案1】：

确实有很多方法可以做到这一点。这是一个：

this.setState(prevState => (
  {appointmentsData: {...prevState.appointmentsData}, newAppt}
));

尽管您的方法也应该有效，但如果您先添加appointmentsData:。像这样：

this.setState({appointmentsData: {...this.state.appointmentsData, ...newAppt}});

这会将所有以前的值传播到一个新对象中，加上您要添加的那个。

当新的状态依赖于先前的状态值时，我个人总是使用设置状态的函数式方式，但你的方式在这里也可以。

【讨论】：

【解决方案2】：

您不应在newAppt 上使用扩展运算符。只需： this.setState({ ...this.state.appointmentsData, newAppt});。在我看来，newAppt 上的扩展运算符没有得到const 的任何数据。

【讨论】：