React.js：如何通过子组件传递的回调更新父组件state，解决数据不刷新问题

根因说明 #

你现在遇到的问题核心是父子组件没有通信机制：

• 父组件的列表刷新依赖reRender状态变更，该状态仅父组件内部可访问，子组件完成新增操作后无法通知父组件刷新数据
• 父组件的fetchData方法中复用了外部的newUsers数组做push操作，数组引用未发生变化，React可能会判定state无变更跳过重渲染
• 子组件当前仅修改自身状态，和父组件的列表刷新逻辑完全无关

修复步骤 #

1. 调整父组件逻辑 #

首先修改父组件的fetchData方法，每次拉取数据都生成全新数组，保证state更新触发重渲染：

const fetchData = async () => {
  const response = await getDepartment('fmDepartments', 'fmDepartmentsId', 'All', 100, 0);
  // 每次拉取都生成新数组，不要复用外部数组push
  const newUsers = response.data.map(u => ({
    sequence: u.sequence,
    name: u.name,
    datecreated: u.datecreated,
    dateupdated: u.dateupdated,
    status: u.status,
    actions: ([
      <div className={classes.root}>
        {/* 原有操作按钮逻辑完全保留 */}
      </div>
    ])
  }))
  setNewUserLists(newUsers)
}

然后修改表格配置，给子组件传入新增成功后的回调方法：

// 父组件需提前声明reRender状态（你原逻辑已有该状态，无需重复声明）
// const [reRender, setReRender] = useState(false);

const options = {
  // 原有配置项全部保留
  customToolbar: () => {
    // 给子组件传入刷新回调
    return <CustomToolbar onAddSuccess={() => setReRender(prev => !prev)} />
  },
  setFilterChipProps: (colIndex, colName, data) => {
    return {
      color: 'primary',
      variant: 'outlined',
      className: 'testClass123',
    };
  }
};

2. 调整子组件逻辑 #

子组件新增数据成功后，调用父组件传入的回调触发列表刷新即可：

addDepartment(request).then(res =>{
  if (res.status == 200){
      Swal.fire({
        icon: 'success',
        title: 'Department',
        text: 'New Department has been added successfully.',
      }).then(res => {
        // 调用父组件传入的刷新回调，原有修改自身state的逻辑可以删除
        this.props.onAddSuccess?.()
      })
  }else{
    Swal.fire({
      icon: 'error',
      title: 'Oops',
      text: 'Something went wrong.',
    })
  }
})

你子组件构造函数中声明的自身state已经没有作用，可以直接删除。

修改完成后，子组件新增数据成功就会自动触发父组件拉取最新列表数据，无需手动刷新页面。

内容的提问来源于stack exchange，提问作者user15404864