ReactJS页面首次渲染/刷新时表格数据不显示问题求助

问题根因 #

你当前的问题核心是组件本地状态和props传入的数据源不同步：

• 首次渲染页面时，接口请求还未返回，props传入的resultList是空值，你用const [records, setRecords] = useState(resultList)初始化的本地records也是空值
• 接口请求完成后resultList更新，但你没有监听这个变化同步更新本地的records状态，导致封装的useTable钩子拿到的一直是初始的空数据
• 跳转其他页面再返回时，组件会重新挂载，此时resultList已经有缓存数据，初始化records时就能拿到正确值，所以表格正常显示

解决方法 #

二选一即可，推荐第二种更简洁：

方法1：添加监听同步本地状态

在Grades组件中添加useEffect，监听resultList的变化，同步更新本地records：

// 加在你现有的useEffect逻辑后即可
useEffect(() => {
  setRecords(resultList)
}, [resultList])

方法2：删除多余的本地状态，直接使用props传入的数据源

你当前代码里没有修改本地records的逻辑，完全不需要多维护这个状态，直接把传入useTable的参数从records改成resultList即可：

// 把原来的调用代码
// const { TblContainer, TblHead, TblPagination, recordsAfterPagingAndSorting, handleSearchChange } = useTable(records, headCells, filterFn);
// 替换为
const { TblContainer, TblHead, TblPagination, recordsAfterPagingAndSorting, handleSearchChange } = useTable(resultList, headCells, filterFn);

改完就可以把没用的本地状态声明删掉：const [records, setRecords] = useState(resultList)

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