ReactTable-6无法渲染API数据，硬编码数据正常显示求助

使用react-table-6组件渲染表格时，API返回的数据在控制台显示正常，但表格始终提示“No data found”；改用硬编码数据时，表格能正常展示内容。

代码示例 #

import React,{useState, useEffect, useContext} from 'react'
import ReactTable from "react-table-6";
import 'react-table-6/react-table.css';
import axios from "axios";
// 补充ThemeContext的导入，原代码遗漏
import { ThemeContext } from './path-to-theme-context';

export default function Inventory(){

  // 硬编码测试数据
  const compdata = [
    {
      FirstName: "Chandu",
      LastName: "Reddy",
      _id: "63c5766f9d9de1b624481574",
      Discription: {
        _id: "63c5766f9d9de1b624481574",
        DOB: "Havells",
        Age: "HiBreak",
      },
      Address: "Something",
    }
  ];

  const handleDelete=(data)=>{
    console.log(data)
  }
  const handleEdit=()=>{
    console.log("dcdc")
  }
  
  // 表格列配置
  const columns = [
    {
      Header: "FirstName",
      accessor: "FirstName",
      sortable: false
    },
    {
      Header: "LastName",
      accessor: "LastName",
      sortable: false
    },
    {
      Header: "Address",
      accessor: "Address",
      sortable: false
    },
    {
      Header: "Actions",
      Cell: (row) => (
        <div>
          <a onClick={() => handleEdit(row.original)}>Edit</a>
          <a onClick={() => handleDelete(row.original)}>Delete</a>
        </div>
      )
    }
  ];
  
  const [data1, setData1] = useState([]);
  const { toggle } = useContext(ThemeContext);
  
  // 数据请求逻辑
  useEffect(()=>{
    const fetchData = async () => {
      try {
        const res = await axios.get(`http://localhost:4001/api/uploadCsv/getData`);
        // 确认返回的是数组，若不是则转换格式
        if(Array.isArray(res.data)){
          setData1(res.data);
        } else {
          console.error('API返回的数据不是数组格式:', res.data);
        }
        console.log('API返回数据:', res.data);
      } catch (err) {
        console.error('数据请求失败:', err);
      }
    };
    fetchData();
  }, []); // 空依赖，仅组件挂载时请求一次

  const [expanded, setExpanded] = useState({});
  
  return(
    <div className="container">
      <div className='Table-container'>
        <ReactTable
          data={data1}
          columns={columns}
          defaultPageSize={data1.length || 10} // 避免初始length为0导致分页异常
          showPagination={false}
          resizable={false}
          expanded={expanded}
          onExpandedChange={(newExpanded) => setExpanded(newExpanded)}
          getTrProps={(state, rowInfo) => {
            return rowInfo ? {
              onClick: () => {
                setExpanded({
                  ...expanded,
                  [rowInfo.viewIndex]: !expanded[rowInfo.viewIndex]
                });
              }
            } : {};
          }}
          SubComponent={(row) => {
            // 用可选链避免嵌套字段不存在导致报错
            return (
              <div style={{ padding: "20px" }}>
                <em>{row.original.Discription?.Make || '无相关数据'}</em>K<br />
              </div>
            );
          }}
        />
        <br />
      </div>
    </div>
  )
}

排查与解决要点 #

• 检查API返回数据格式：确保返回的是数组，而非对象。如果API返回的是包含数组的对象（比如{data: [...]}），需要修改为setData1(res.data.data)。
• 字段名严格匹配：表格的accessor必须和API返回的字段名完全一致（包括大小写）。比如硬编码用FirstName，API返回如果是firstName，就会导致表格找不到数据。
• 修正useEffect依赖：原代码把setData1放进依赖数组，这是不必要的，改成空数组确保仅挂载时请求一次数据，避免无效重渲染。
• 修复分页配置：初始时data1是空数组，defaultPageSize={data1.length}会设置为0，导致表格无数据显示。改成defaultPageSize={data1.length || 10}，给默认分页大小。
• 避免嵌套字段报错：展开行的Discription.Make如果可能不存在，必须用可选链?.和默认值，防止报错中断表格渲染。
• 补全缺失的导入：原代码使用useContext(ThemeContext)但未导入，会导致组件报错，必须补充对应的导入语句。

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