反应状态 - 更新嵌套数组中对象的属性

Question

我有一个 React 应用程序，其界面允许用户选择日期和时间段。我有一个维护状态的顶级对象，它可能如下所示：this.state = {  days: [{     date: '12-13-2022',    time_slots: [{        start: '10 am',        end: '11 am',        selected: false      },{        start: '1 pm',        end: '3 pm',        selected: false      }]    }, {    date: '12-14-2022',    time_slots: [{       start: '10 am',       end: '11 am',       selected: false     }  }]}当用户单击某个时间段时，我想将该selected属性更新为true.到目前为止，我有这个，但我认为我正在改变状态，这是不好的做法。slotClicked(day_index, slot_index) {  let state = this.state.days[day_index].time_slots[slot_index].selected = true;  this.setState({state});}我如何以有效的（在重新渲染方面）和不可变的方式更新状态？

Answer 1

与其他答案相反，您必须深度克隆您的阵列：

slotClicked(day_index, slot_index) {

  // If you prefer you can use lodash method _.cloneDeep()

  const newDays = JSON.parse(JSON.stringify(this.state.days));

  newDays[day_index].time_slots[slot_index].selected = true;

  this.setState({days: newDays});

}

如果您不深度克隆您的数组，则该time_slots数组将通过引用进行复制，并且对其进行突变会改变原始数组的状态。

Answer 2

您可以使用Array.map函数作为，

slotClicked(day_index,slot_index){

        let current_state = this.state;

        this.state.days.map((days,days_index) => {

            if(days_index===day_index){

                // console.log("day",days);

                let newSlot = '';

                days.time_slots.map((time_slot,slots_index)=>{

                    if(slots_index===slot_index){

                        // console.log("time",time_slot);

                        newSlot = Object.assign({},time_slot,{selected:true});

                    }

                })

                // console.log("new slot",newSlot);

                days.time_slots[slot_index] = newSlot;

                this.setState({days:current_state},()=>{

                    console.log(this.state);

                });

            }

        });

    }