Question

这是我组件的初始状态

this.state = {
  date: "",
  students: "",
  attendance: {}
}

在 ComponentDidMount 上，我从减速器获取日期和学生数组。

componentDidMount() {
    const { date, students } = this.props;
    const todayDate = this.getFormattedDate(date);

    this.setState(prevState => ({
      date: todayDate,
      students,
      attendance: {
        ...prevState.attendance,
        [todayDate]: students
      }
    }), () => console.log('CDM', this.state));
}

我有一个复选框，当触摸该复选框时，将更新特定学生的attendance[todayDate]和属性checked。

在渲染中，我正在映射出勤[日期]并返回JSX

<CheckBox
   checked={student.checked}
   onPress={() => this.takeAttendance(student.id)}
   containerStyle={styles.checkboxStyle}
/>

checkHandler

takeAttendance(id) {
    this.setState(prevState => ({
      attendance: {
        ...prevState.attendance,
        [this.state.date]: prevState.attendance[this.state.date].map(
          obj => (obj.id === id ? Object.assign(obj, { checked: !obj.checked }) : obj)
        )
      }
    }), () => console.log('TA', this.state));
  }

所以它正常工作。出勤[日期]的学生的属性checked正在更改，但同时也会更改学生状态下的检查值。我不明白为什么它也改变了学生的状态，而不仅仅是出勤[日期]。

添加了视频以供参考。 Streamable

Answer 1

嗯，看起来一切正确，可能是尝试将this.state.date寻址到prevState.date吗？

attendance: {
        ...prevState.attendance,
        [prevState.date]: prevState.attendance[prevState.date].map(
          obj => (obj.id === id ? Object.assign(obj, { checked: !obj.checked }) : obj)
        )
      }

编辑： this.setState(prevState => ({ date: todayDate, students,可能有问题。您正在将学生设置为与[todayDate]: students相同。将选中的属性添加到每个学生，并将其存储在出勤[日期]。

Answer 2

尝试检查深克隆对象

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone

反应setState更改状态中的其他对象

2 个答案: