如何在 ReactJS 的 setState 调用期间有条件地从 javascript 对象中删除值？

Question

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
            },
          },
        })
      );
    }

  }

我有上面的功能，我根据数量的值设置 dishDetails 的状态。

我想达到什么目的？

1. 当数量!== 0 设置dishDetails状态如图。 （这很完美）
2. 当数量 === 0 时，我想从 dishDetails 中删除那个特定的 id，但应该保持之前的状态。 （我需要帮助解决这个问题）

相关状态如下：

this.state = {
   bookingFormData: {
      dishDetails: []
   }
}

Answer 1

能把id作废吗？

将 id 的值设置为 null 以删除内容。

dishDetails: {
  ...prevState.bookingFormData.dishDetails,
  [id]: null,
},

如果它是一个数组就更简单了

dishDetails: {
  ...prevState.bookingFormData.dishDetails.filter((item) => item.id !== id),
},

或者如果输入和输出都是对象

dishDetails: {
  ...Object.entries(prevState.bookingFormData.dishDetails)
    .filter(([key, item]) => item.id !== id)
    .reduce((acc, [key, item]) => ({...acc, [key]: item}), {}),
},

Answer 2

我将使用 delete operator：

if (quantity === 0) {
 const dishDetails = {...this.state.bookingFormData.dishDetails}
 delete dishDetails[id];

this.setState(
  prevState => ({
    bookingFormData: {
      ...prevState.bookingFormData,
      dishDetails
   }
  })
 )
}

Answer 3

您可以使用解构赋值和 rest 运算符来创建新对象并删除 prop :

if (quantity === 0) {
      this.setState(
        prevState => {
          const { [id]: removedId, ...newDishDetails } = prevState.bookingFormData.dishDetails;
          return {
            bookingFormData: {
              ...prevState.bookingFormData,
              dishDetails: newDishDetails,
            },
          },
        }
      );
    }