Как условно удалить значение из объекта javascript во время вызова setState в ReactJS?

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 , но предыдущее состояние должно быть сохранено , (мне нужна помощь в решении этой проблемы)

Соответствующее состояние выглядит следующим образом:

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

Answer 1

Вы можете использовать присвоение деструктуры и оператор rest, чтобы создать новый объект и удалить реквизит:

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

Answer 2

Я буду использовать оператор удаления :

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

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

Answer 3

Можете ли вы обнулить идентификатор?

Установите значение идентификатора в 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}), {}),
},