[英]How to modify an object property in React
I have an object that takes the following form:我有一个采用以下形式的 object:
booking Object {
"2019-11-29": Object {
"selected": true,
},
"2019-11-30": Object {
"selected": true,
},
}
that I want to modify through invoking a function.我想通过调用 function 来修改。 More specifically, I want to toggle the
selected
property, which is Boolean.更具体地说,我想切换
selected
的属性,即 Boolean。
I want to invoke a function that 1) checks to see if a certain key exists in the object, "2019-11-29" in this example, and if it does, 2) toggle the selected
property, while everything else in the object remain the same.我想调用一个 function 1) 检查 object 中是否存在某个键,在此示例中为“2019-11-29”,如果存在,则 2) 切换所选属性,而 object 中是否存在某个键,如果存在,则 2) 切换
selected
属性,而 object 中是否存在某个键保持不变。
My following code toggles the selected
property temporarily, but doesn't save it in the state.我的以下代码临时切换
selected
属性,但不会将其保存在 state 中。
const [selected, setSelected] = useState([])
const [booking, setBooking] = useState({})
const select = day => {
let markedDay = day.dateString
// first checks in the "selected" array to see if the "markedDay" exists
if(selected.includes(markedDay)){
// toggles the property within the "booking" object
booking[markedDay] = {
selected: !booking[markedDay].selected
}
setBooking(booking) // this hook doesn't update the state with the newly toggled object property
}
// saves the "markedDay" into a new array if it doesn't exist in the array already
const newSelected = [...selected, markedDay];
// assigns the property "selected" to the newly entered date and combines it with the pre-existing object
let obj = newSelected.reduce((c, v) => Object.assign(c, {
[v]: {
selected: true,
}
}), {})
setSelected(newSelected)
setBooking(obj);
}
What I mean by temporarily is that when I console log the booking
object right after the booking[markedDay].selected
has been toggled, it will show that the property shows as false
, which is the intended result.我暂时的意思是,当我在切换
booking[markedDay].selected
后立即控制台记录booking
object 时,它将显示该属性显示为false
,这是预期的结果。 However, if I were to console log booking
outside of the if
statement, the global state still shows the property as true
.但是,如果我要在
if
语句之外控制日志booking
,全局 state 仍将属性显示为true
。
PS I have mistakenly named the array state selected
of the useState
the same as the property of the object selected
, but they are unrelated. PS 我错误地将 useState 的数组 state
selected
命名为与useState
selected
的属性相同,但它们无关。
You're directly modifying the state, that's why the updates aren't reflected in the component.您正在直接修改 state,这就是为什么更新不会反映在组件中的原因。 To achieve what you want you can use functional form of
setState
and object spread:要实现您想要的,您可以使用
setState
和 object 传播的功能形式:
if (selected.includes(markedDay)) {
setBooking(currentBooking => {
return {
...currentBooking,
[markedDay]: {
...currentBooking[markedDay],
selected: !currentBooking[markedDay].selected
}
}
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.