Question

我的反应状态中的值看起来像这样：

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": []
};

Answer 1

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

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

尽管您的方法也应该有效，但前提是您只需先添加appointmentsData:。像这样：

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

这会将之前的所有值扩展到一个新对象，再加上要添加的对象。

当新的状态值取决于先前的状态值时，我个人总是使用功能性的方式来设置状态，但是您的方法在这里也很好。

Answer 2

您不应在newAppt上使用扩展运算符。随身携带： this.setState({ ...this.state.appointmentsData, newAppt});。在我看来，newAppt上的散布运算符未获得const的任何数据。

使用React Spread运算符的数组中的SetState

2 个答案: