React子组件新增数据后父组件未自动刷新问题求助

问题排查及修复方案 #

你代码里一共有4处明显错误，依次修改即可解决新增后不自动刷新的问题：

• 父组件回调传参错误
  你给子组件传sendToParent的时候加了括号，等于组件初始化时就直接执行了HandleAdd，没有把函数引用传给子组件调用。
  修复：把父组件return里的代码改成

<CustomToolbar sendToParent={HandleAdd}/>

去掉HandleAdd后面的括号。

• 子组件调用回调的方式错误
  子组件新增成功后调用父组件方法时，没有从props里取值，直接写了this.sendToParent，自然无法触发父组件的逻辑。
  修复：把子组件新增成功后的回调调用改成

this.props.sendToParent(true);

• 重渲染触发逻辑失效
  你当前用reRender状态触发拉取数据，如果两次传入setRerender的值相同，React会判定状态无变化，不会触发useEffect执行。
  修复：把父组件的HandleAdd改成翻转状态的写法，保证每次调用状态一定更新：

const HandleAdd = () =>{
    setRerender(prev => !prev);
}

• 拉取到的新数据没有存入状态
  你现在fetchData方法里拿到接口返回的数据后，只做了遍历处理，没有把处理后的结果存入useState定义的响应式状态，就算拉到了最新数据，页面也不会刷新。
  修复：先在父组件定义存储列表的状态，比如

const [departmentList, setDepartmentList] = useState([]);

然后在fetchData处理完数据后，把结果赋值给状态：

const fetchData = async () => {
  const response = await getDepartmentData('All', 100, 0);
  const processedList = response.data.map(function(u){
      // 原有处理逻辑
  })
  setDepartmentList(processedList)
}

页面渲染列表时用departmentList渲染即可。

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