在 setstate 之后反应不更新子组件

Question

删除子组件上的“违规”后，我更新了父组件中的状态，但是更改并没有在视觉上更新。在它更新的状态下，不会刷新子组件。这可能与浅层更新有关，但我不确定如何修复它。

我的 updatedData 也更新了，但状态不会立即更新。

谁能帮帮我？

这里是代码

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

Answer 1

当你的 nextState 依赖于旧的时，你应该像这样传递一个函数来更新你的状态：

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

Answer 2

setState 是一个异步函数。 试试这个：

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