[英]How to update state object key value?
I am declaring dateRangePicker field in component state like below我在组件状态中声明 dateRangePicker 字段,如下所示
dateRangePicker: {
selection: {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
},
}
later start date and end date changes as below较晚的开始日期和结束日期更改如下
let startDate = "2019-04-16";
let endDate = "2019-05-16";
But, I am not able to update these value in state after following code block但是,在遵循代码块后,我无法在状态中更新这些值
this.setState({
dateRangePicker.selection.startDate : startDate,
dateRangePicker.selection.endDate : endDate,
})
I want to update the start and end date accordingly我想相应地更新开始和结束日期
It doesn't work the way you showed.它不像你展示的那样工作。 It should be like this:
应该是这样的:
this.setState(ps=>({
...ps,
dateRangePicker:{
...ps.dateRangePicker, // Copy old data
selection: {
...ps.dateRangePicker.selection, // Same here
startDate: startDate
endDate: endDate
},
}
}))
We use functional form of setState
, because you can see at one point we access data from previous state: ps.selection
我们使用
setState
函数形式,因为你可以看到我们从以前的状态访问数据: ps.selection
状态是一个不可变的对象,所以你不能修改它,而是创建一个新的,所以使用 spread ... 表达式来创建一个新的状态。
what your'e tryin to acheive is to change the state of a deep/nested object in setState..
你试图实现的是改变 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,
}
}})
)
Or,或者,
// copy without reference..
const dateRangePicker = { ...this.state.dateRangePicker }
dateRangePicker.selection = {
startDate: startDT,
endDate: endDT,
}
this.setState({ dateRangePicker })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.