Я пытаюсь добавить объект во вложенный массив, который я сохранил в своем объекте состояния, но, похоже, у него есть проблема с ним

Question

У меня есть объект, который я создал в состоянии, и это моя модель для бронирования.Моя функция addPassenger должна при щелчке создавать пустой объект в массив со свойствами.Когда я console.log создаю новый массив, он возвращает мне массив правильно, но когда я выполняю функцию, ничего не происходит, никаких ошибок.Просто пустая консоль.

Весь мой компонент https://pastebin.com/RLprKJrr

 booking: {
        id: "",
        number: "",
        date: "",
        bookingStatus: "OPCIJA",
        paymentMethod: "MODELA1",
        tripID: 1,
        passengers: [
          {
            id: "",
            holder: {
              email: "",
              address: "",
              mobile: ""
            },
            name: "",
            surname: "",
            passport: "",
            idCard: ""
          }
        ]
      }

addPassenger = e => {
    e.preventDefault();
    let passengersArray = [...this.state.booking.passengers];
    console.log(passengersArray);
    this.setState({
      passengers: [...passengersArray, {
        id: "", 
        name: "",
        surname: "",
        passport: "",
        idCard: ""
      }]
    })
    this.checkArrayLength();
  }

Answer 1

Пожалуйста, попробуйте указать состояние бронирования. Пассажиры, а не только пассажиры:

this.setState({
  booking.passengers: ...

Answer 2

Вы должны включить ключ «бронирование» в вашем новом штате:

this.setState(previousState => ({
  booking: {
    ...previousState.booking,
    passengers: [...passengersArray, {
      id: "", 
      name: "",
      surname: "",
      passport: "",
      idCard: ""
    }]
  }
}));

Надеюсь, это вам поможет!

Answer 3

Поскольку проблема заключается в том, что данные передаются в setState

Это структура вашего начального состояния

{
  booking: {
    passengers: {
      ...
    }
  }
}

, которая затем доступна через this.state.booking.passengers

Но когда вы снова устанавливаете состояние, вы ставите пассажиров на тот же уровень, что и при бронировании, подобном этому

{
   booking: {
     ...
   },
   passengers: {
     ...
   }
 }

Так что вам в основном нужно сделать это

this.setState({
  bookings: {
    ...this.state.bookings,
    passengers: [...passengersArray, {
        id: "", 
        name: "",
        surname: "",
        passport: "",
        idCard: ""
      }]
  }
})