我正在尝试将一个对象添加到我存储在我的状态对象中的嵌套数组，但似乎有问题

Question

我有一个在状态下创建的对象，它是我的预订模型。我的 addPassenger 函数应该在单击时将一个空对象创建到具有属性的数组中。当我 console.log 新数组时，它 returns 我正确地使用了数组，但是当我执行函数时没有任何反应，没有错误。只是空白控制台。

我的整个组件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

因为问题是数据传递给 setState

这是你初始状态的结构

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

然后可以通过 this.state.booking.passengers

访问

但是当您再次设置状态时，您会将乘客置于与这样的预订相同的级别

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

所以你基本上需要这样做

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

Answer 2

请尝试设置 booking.passengers 的状态，而不仅仅是乘客：

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

Answer 3

您必须在新状态中包含密钥 'booking'：

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

希望对你有帮助！

我正在尝试将一个对象添加到我存储在我的状态对象中的嵌套数组，但似乎有问题

I am trying to add an object to a nested array I have stored in my state object, but seem to have an issue with it

javascript

nested

reactjs