Splice仅删除数组中的最后一个元素

I'm having a small issue with React (still new to it). I have an array of Results. These Results have nested Bookings, also in an array, and the latter is what I'm manipulating.

我对React有一个小问题(仍然是新手)。我有一系列的结果。这些结果具有嵌套的Bookings,也在数组中,后者是我正在操作的。

When User creates Booking, everything goes as expected - findIndex gets the correct Result element and modifies its Bookings array accordingly.

当用户创建预订时,一切都按预期进行 - findIndex获取正确的Result元素并相应地修改其Bookings数组。

However, when I want to "Unbook", it only finds the last Result in the array, and findIndex is always -1 (so I haven't even gotten to the Bookings part, because the Result index I get is wrong).

但是,当我想要“Unbook”时,它只找到数组中的最后一个Result,而findIndex总是-1(所以我甚至没有进入Bookings部分,因为我得到的Result索引是错误的)。

The code is similar, my items all have unique keys, and I don't understand what could be the problem (using Alt as Flux implementation)?

代码类似,我的项目都有唯一的密钥,我不明白可能是什么问题(使用Alt作为Flux实现)?

Here is what happens on Create:

以下是Create上发生的情况:

onCreateBookingSuccess(data) {
    let resultIndex = this.results.findIndex((result) => result.id === data.id);
    this.results.update(resultIndex, (result) => result.bookings.push(data));
    toastr.info('Booked! User will receive notification.');
  }

And on delete:

并删除:

onDestroyBookingSuccess(data) {
    let resultIndex = this.results.findIndex((result) => result.id === data.id);
    var myBooking;
    this.results.map((result) => {
      myBooking = result.bookings.findIndex((booking) => booking.id === data.booking);
    });
    this.results.update(resultIndex, (result) => result.bookings.splice(myBooking,1));
    toastr.warning('Unbooked! User will receive notification.');
  }

My object:

<Result key={result.id} id={result.id} bookings={result.bookings} />

As I mentioned, the first operation goes as planned, everything is modified as it should. The issue with the second op starts from the very beginning, when resultIndex returns -1.

正如我所提到的,第一个操作按计划进行,一切都按照应有的方式进行了修改。第二个操作系统的问题从一开始就开始,当resultIndex返回-1时。

1 个解决方案

#1

The problem seems to be here:

问题似乎在这里:

var myBooking;
this.results.map((result) => {
  myBooking = result.bookings.findIndex((booking) => booking.id === data.booking);
});

You’re always assigning to myBooking, even when the index is not found (-1) after having already found it, so it’s equivalent to this.results.last().bookings.findIndex(...). Really you only want to get the (first?) value that’s not -1:

你总是分配给myBooking,即使在找到它之后找不到索引(-1),所以它等同于this.results.last()。bookings.findIndex(...)。真的,你只想获得不是-1的(第一个?)值:

var myBooking = this.results.map((result) => {
  myBooking = result.bookings.findIndex((booking) => booking.id === data.booking);
}).find((index) => index != -1);

Also, consider renaming myBooking to better indicate it’s an index and not the actual record.

另外,考虑重命名myBooking以更好地指示它是索引而不是实际记录。

#1