React中useState运行异常，新增数据后需刷新页面才可查看是什么原因？

你当前的代码存在3个核心问题，才会导致新增数据后需要刷新页面才能看到最新内容：

• 首先你使用的是类组件的setState方法，并非函数组件的useState Hook，二者属于React不同组件模式的状态更新API。
• 你在新增成功回调里执行的this.setState(res)完全无效：这里的res是Swal弹窗点击确认后的返回值，和你的部门列表数据没有任何关系，就算更新了当前CustomToolbar组件的状态，也不会影响展示部门列表的Department组件的渲染。
• 两个组件状态完全隔离：存储部门列表、渲染列表的Department组件，和当前新增部门的CustomToolbar组件没有状态关联，你新增数据后没有触发Department组件重新拉取最新的列表数据，只有手动刷新页面时才会重新初始化拉取全量数据，所以才会出现刷新才可见的问题。

解决方案 #

场景1：CustomToolbar是Department的子组件 #

直接在Department组件中定义好拉取部门列表的方法，通过props传递给CustomToolbar，新增成功后调用该方法即可：

// Department组件内定义刷新方法
const refreshDeptList = () => {
  // 调用原有的拉取部门列表接口，更新本组件内存储列表的state
  fetchDeptList().then(list => {
    this.setState({ deptList: list })
  })
}
// 渲染CustomToolbar时传入
<CustomToolbar refreshDeptList={refreshDeptList} />

// CustomToolbar新增成功回调里调用
addDepartment(request).then(res =>{
  if (res.status == 200){
    Swal.fire({
      icon: 'success',
      title: 'Department',
      text: 'New Department has been added successfully.',
    }).then(() => {
      // 调用父组件传过来的刷新方法
      this.props.refreshDeptList()
    })
  }
})

场景2：两个组件没有直接父子关系 #

可以选择以下任意一种方案：

• 用React Context API定义全局的部门列表状态，新增成功后更新全局状态，所有依赖该状态的组件会自动重新渲染
• 引入Redux、Mobx等状态管理工具统一管理部门数据
• 新增成功后主动调用一次部门列表拉取接口，把最新列表更新到渲染列表对应的state中

额外优化建议 #

尽量不要用document.getElementById获取表单值，React中推荐使用受控组件，将输入框的值绑定到组件state上，避免原生DOM操作带来的状态不同步问题。

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