Блог

После удаления «нарушения» в дочернем компоненте я обновляю состояние в родительском компоненте, однако изменения не обновляются визуально. В состоянии он обновляется, однако не обновляет дочерний компонент. Возможно, это как-то связано с мелкими обновлениями, но я не уверен, как это исправить.

Также мои обновленные данные обновляются, но состояние не обновляется сразу.

Кто-нибудь может мне помочь?

Вот код

 delClick = (id) => {
    console.log('id when it come in: ', id);
    const updatedData = this.state.students.map((student) => {
        return {
            ...student,
            infractions: student.infractions.filter((infraction) => {
                return infraction.id !== id;
            }),
        };
    });
    console.log('updataed data: ', updatedData);
    this.setState({
        students: updatedData,
    });
    console.log('state students: ', this.state.students);
};
 

Когда ваше следующее состояние зависит от старого, вы должны передать функцию для обновления своего состояния следующим образом:

   this.setState((prevState, props) => {
            return {
               students:  prevstate.students.map((student) => {
                   return {
                    ...student,
                    infractions: student.infractions.filter((infraction) => infraction.id !== id;),
                   };
              });
            };
   });
 

setState-это асинхронная функция. Попробуйте это:

  this.setState({
     students: updatedData, 
 },() => {
     console.log(this.state.students);
 });