时间戳

首页 > 解决方案 > 反应状态 - 更新嵌套数组中对象的属性

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

问题描述

我有一个 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});
}

我如何以有效（就重新渲染而言）和不可变的方式更新状态？

标签： javascriptreactjs

解决方案

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

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数组将通过引用复制并对其进行突变，它将使原始数组的状态发生突变。

推荐阅读