如何更新状态对象键值？答案

【问题标题】：How to update state object key value?如何更新状态对象键值？
【发布时间】：2019-06-25 12:54:26
【问题描述】：

我在组件状态中声明 dateRangePicker 字段，如下所示

dateRangePicker: {
  selection: {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
  },
}

稍后开始日期和结束日期更改如下

let startDate = "2019-04-16";
let endDate = "2019-05-16";

但是，在执行以下代码块后，我无法更新这些值

this.setState({
  dateRangePicker.selection.startDate : startDate,
  dateRangePicker.selection.endDate : endDate,
})

我想相应地更新开始和结束日期

【问题讨论】：

你更新整个对象，而不是它的一部分

标签： javascript reactjs setstate

【解决方案1】：

它不像你展示的那样工作。应该是这样的：

this.setState(ps=>({
 ...ps,
 dateRangePicker:{
   ...ps.dateRangePicker, // Copy old data
   selection: {
      ...ps.dateRangePicker.selection, // Same here
      startDate: startDate
      endDate: endDate

    },
 }
}))

我们使用setState 的功能性form，因为您可以看到在某一时刻我们访问来自先前状态的数据：ps.selection

【讨论】：

选择在 dateRangePicker 对象中可用？

【解决方案2】：

你试图实现的是改变深层/嵌套的状态 setState 中的对象..

const startDT = "new start date"
const endDT = "new end date"

this.setState(prevState => ({
 ...prevState,
 dateRangePicker: {
  ...prevState.dateRangePicker,
  selection: {
   ...prevState.dateRangePicker.selection,
    startDate: prevState.startDate = startDT,
    endDate: prevState.endDate = endDT,
  }
 }})
)

或者，

// copy without reference..
const dateRangePicker = { ...this.state.dateRangePicker }

dateRangePicker.selection = { 
 startDate: startDT,
 endDate: endDT,
}

this.setState({ dateRangePicker })

【讨论】：

【解决方案3】：

状态是一个不可变的对象，所以你不能修改它，而是创建一个新的，所以使用spread ...表达式来创建一个新的状态。

【讨论】：