[英]How to conditionally remove a value from a javascript object during a setState call in ReactJS?
updateDishDetails(id, quantity) {
if (quantity !== 0) {
this.setState(
prevState => ({
bookingFormData: {
...prevState.bookingFormData,
dishDetails: {
...prevState.bookingFormData.dishDetails, // WORKING
[id]: quantity, // PERFECTLY
},
},
})
);
}
if (quantity === 0) {
this.setState(
prevState => ({
bookingFormData: {
...prevState.bookingFormData,
dishDetails: {
// ...prevState.bookingFormData.dishDetails, // NEED HELP HERE
// [id]: quantity, // AND HERE
},
},
})
);
}
}
I have the above function where I set the state of dishDetails based on the value of quantity.我有上面的函数,我根据数量的值设置了dishDetails的状态。
What do I want to achieve?我想达到什么目标?
The relevant state is a follows:相关状态如下:
this.state = {
bookingFormData: {
dishDetails: []
}
}
You can use destructuring assignment and the rest operator to create a new object and remove a prop :您可以使用解构赋值和 rest 运算符来创建一个新对象并删除一个 prop :
if (quantity === 0) {
this.setState(
prevState => {
const { [id]: removedId, ...newDishDetails } = prevState.bookingFormData.dishDetails;
return {
bookingFormData: {
...prevState.bookingFormData,
dishDetails: newDishDetails,
},
},
}
);
}
Set the id's value to null to remove the content.将 id 的值设置为 null 以删除内容。
dishDetails: {
...prevState.bookingFormData.dishDetails,
[id]: null,
},
if its an array thats easier如果它是一个更容易的数组
dishDetails: {
...prevState.bookingFormData.dishDetails.filter((item) => item.id !== id),
},
or if input and output are both objects或者如果输入和输出都是对象
dishDetails: {
...Object.entries(prevState.bookingFormData.dishDetails)
.filter(([key, item]) => item.id !== id)
.reduce((acc, [key, item]) => ({...acc, [key]: item}), {}),
},
I'll use the delete operator :我将使用删除运算符:
if (quantity === 0) {
const dishDetails = {...this.state.bookingFormData.dishDetails}
delete dishDetails[id];
this.setState(
prevState => ({
bookingFormData: {
...prevState.bookingFormData,
dishDetails
}
})
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.