Question

我有一个在状态下创建的对象，它是预订的模型。我的addPassenger函数应该在单击时将一个空对象创建为具有属性的数组。当我console.log新数组时，它会正确返回我数组，但是当我执行函数时，什么也没有发生，也没有错误。只是空白的控制台。

我的整个组成部分https://pastebin.com/RLprKJrr

import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
} 

<object *ngIf="pdf" [data]="pdf | safe" type="application/pdf" width="100%" height="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: 
<a href=".pdf">Download PDF</a>.</p>
</object>

<button (click)="loadPdf1()">Load Pdf 1</button>
<button (click)="loadPdf2()">Load Pdf 2</button>  

loadPdf1(){
  this.pdf="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
}
loadPdf2(){
  this.pdf="https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
}

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

请尝试设置订票状态，而不只是乘客：

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

Answer 3

您必须在新状态下添加键“预订”：

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

希望对您有帮助！

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

3 个答案: