React Table无法加载JSON数据问题求助

核心问题分析 #

你的代码存在三个关键错误导致数据无法正常显示：

• 列配置的accessor路径错误，错误添加了data.前缀
• Table组件中Props调用缺少括号、行Props使用错误
• useMemo未指定依赖数组，可能导致列配置更新异常

修复后的代码 #

1. 修正IGD组件 #

const IGD = () => {
  const [data, setData] = useState([]);
  
  function fetchData() {
    fetch('data.json', { 
      headers: {
        'Content-Type': 'application/json', 
        'Accept': 'application/json' 
      }  
    })
    .then((res) => {
      // 新增请求状态校验
      if (!res.ok) throw new Error('数据请求失败');
      return res.json();
    })
    .then((datajson) => {
      console.log(datajson);
      setData(datajson);
    })
    .catch(err => console.error('获取数据出错:', err)); // 新增错误捕获
  }

  useEffect(() => {
    fetchData();
  }, []);

  const columns = useMemo(
    () => [
      {
        Header: "No RM",
        columns: [{ accessor: 'no_rm' }]
      },
      {
        Header: "Nama Lengkap",
        columns: [{ accessor: "nama_lengkap" }]
      },
      {
        Header: "Umur",
        columns: [{ accessor: "umur" }]
      },
      {
        Header: "Dokter",
        columns: [{ accessor: "dokter" }]
      },
      {
        Header: "Petugas Registrasi",
        columns: [{ accessor: "petugas_registrasi" }]
      },
      {
        Header: "Jenis Pasien",
        columns: [{ accessor: "jenis_pasien" }]
      },
      {
        Header: "Status",
        columns: [{ accessor: "status" }]
      },
      {
        Header: "Pengaturan",
        columns: [{ accessor: "pengaturan" }]
      }
    ],
    [] // 新增空依赖数组，确保列配置仅初始化一次
  );

  return (
    <div>
        <StyledTable>
            <Table columns={columns} data={data}></Table>
        </StyledTable>
    </div>
  )
}

2. 修正Table组件 #

import React from 'react';
import { useTable } from 'react-table';
export default function Table({ columns, data }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({ columns, data });
    
    return (
        <table {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderProps()}> {/* 修复：添加调用括号 */}
                        {headerGroup.headers.map((column) => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps()}> {/* 修复：改用行专属Props */}
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    )
}

额外检查项 #

• 确认data.json存放位置：Create React App项目需放在public文件夹下，否则无法通过fetch('data.json')访问
• 打开浏览器控制台，查看是否有网络请求错误或JS报错，快速定位剩余问题

内容的提问来源于stack exchange，提问作者github.arief