Reactjs react setState更新对象数组

Reactjs react setState更新对象数组,reactjs,Reactjs,我有下面的代码,我试图用对象数组中修改的几个属性来更新setState onClick(index) { let tmp = this.state.daysOfWeek; tmp[index].active = !tmp[index].active; if (tmp[index].active === true) { tmp[index].className = "selectedDay"; } else { tmp[index].clas

我有下面的代码,我试图用对象数组中修改的几个属性来更新setState

onClick(index) {
    let tmp = this.state.daysOfWeek;
    tmp[index].active = !tmp[index].active;
    if (tmp[index].active === true) {
      tmp[index].className = "selectedDay";
    } else {
      tmp[index].className = "remSelectedDay";
    }

    this.setState({ daysOfWeek: [...this.state.daysOfWeek, tmp]})
  }
这里tmp是修改过的对象数组。如果我使用扩展运算符,那么对象的排列将与tmp相关

如何使用对象数组更新当前状态?

映射和setState函数形式的组合将允许您在不直接修改状态的情况下正确更新数组:

onClick (index) {
    const { daysOfWeek } = this.state        // for example: [1, 2, 3, 4, 5], index = 1
    this.setState({
        daysOfWeek: [
            ...daysOfWeek.slice(0, index),               // [1]
            {
                ...daysOfWeek[index],                    // this is 2
                active: !daysOfWeek[index],
                className: daysOfWeek[index] ? 'selectedDay' : 'remSelectedDay'
            },
            ...daysOfWeek.slice(index + 1)               // [3, 4, 5]
        ]
    })
}
onClick(index){
  this.setState(state => {
    return {
      daysOfWeek: state.daysOfWeek.map((day, i) => {
        if (i === index) {
          return {
            ...day,
            active: !day.active,
            className: day.active ? 'remSelectedDay' : 'selectedDay'
          }
        }
        return day;
      })
    }
  })
}

使用map循环遍历它们,然后返回更新的数组。您的状态/一周中的天数是什么样的?