react-table初始加载、页面刷新及路由跳转后无法渲染数据求助

核心问题 #

代码的主要问题是setColumns是React的异步状态更新方法，调用后不会立刻修改当前闭包中的columns state值。你在获取行数据时遍历的还是初始的空columns数组，最终生成的rowArr内的对象没有有效字段，所以表格没有数据。跳转页面或刷新后组件重新挂载，每次都会触发这个逻辑bug，因此数据消失。

修复步骤 #

1. 处理行数据时直接使用刚请求得到的colArr变量，不要使用state中的columns
2. 给react-table入参的columns和data添加useMemo包裹，保证引用稳定，避免不必要的重渲染异常
3. 可额外添加加载状态提升用户体验

修改后代码示例 #

import { useState, useMemo, useEffect } from "react";
import { useTable } from "react-table";

const TableData = () => {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);
  // 稳定react-table入参的引用，避免异常重渲染
  const memoColumns = useMemo(() => columns, [columns]);
  const memoData = useMemo(() => data, [data]);
  const tableInstance = useTable({ columns: memoColumns, data: memoData });
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    tableInstance;

  useEffect(() => {
    async function fetchData() {
      try {
        // 拉取列配置
        let colArr = [];
        let responseCol = await fetch("/api/columns");
        responseCol = await responseCol.json();
        responseCol.forEach((record) => {
          colArr.push({
            Header: `${record.label}`,
            accessor: `${record.value}`,
          });
        });
        setColumns(colArr);
        // 拉取行数据
        let rowArr = [];
        let responseRow = await fetch("/api/rows");
        responseRow = await responseRow.json();
        responseRow.records.forEach((record) => {
          const rowObj = {};
          // 直接使用刚生成的colArr，避免异步state的旧值问题
          colArr.forEach((column) => {
            rowObj[column.accessor] = `${record[column.accessor]}`;
          });
          rowArr.push(rowObj);
        });
        setData(rowArr);
      } catch (e) {
        console.log(e.message);
      }
    }
    fetchData();
  }, []);

  // 此处保留原有的表格渲染逻辑即可
  return (/* 原有表格渲染代码 */)
}

额外排查项 #

如果修复后仍有问题，可打开浏览器控制台查看Network面板，确认/api/columns和/api/rows两个接口的返回是否符合预期，排除接口报错、权限不足等问题。

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