更新數組類型的狀態 <Object> 在ReactJS中沒有突變

Question

我有一個帶有元信息的對象數組。 這是對象的架構。

       this.state.slotData [{
        availability: boolean,
        id: number,
        car: {
            RegistrationNumber : string,
            Color: string
        }, {...}, {...}, ...]

現在，對於任何傳入的汽車，我都會記錄汽車詳細信息，然后進一步檢查是否有可用的插槽，如果有，則更新slotData狀態。 我filter（） slotData查找所有可用的插槽，然后引用availableSlots [0]訪問最近的空插槽的ID。 現在，我只需要更新this.state.slotData而不對其進行更改 。

Answer 1

如果要應用不可變的更新並將car作為單個對象添加到slotData數組中，則應首先散布整個slotData數組，然后再添加car對象，如下所示：

const updatedSlotData = [...slotData, carObj];
this.setState({ slotData: updatedSlotData });

只要先制作副本，就可以安全地對副本進行突變。