Реагируйте setState, изменяя другой объект в состоянии

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}
/>

Чек Хендлер

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 учащегося, посещающего [дата], изменяется, но оно также меняет проверенное значение в части состояния студента. Я не понимаю, почему это также меняет состояние студентов, а не только посещаемость [дата].

Добавлено видео для справки. потоковый

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)
        )
      }

Edit: Может быть проблема с 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