React项目中Axios加载JSON后DataGrid无数据行显示问题排查

1. 本地JSON文件路径/引入方式错误 #

• 若使用Create React App，FakeTransactions.json放在public目录下时，Axios请求路径必须是根路径开头的/FakeTransactions.json，而非相对组件的路径；如果放在src目录下，直接用import transactions from './FakeTransactions.json'导入即可，无需Axios。
• 核对文件名大小写：Linux/macOS环境下文件名区分大小写，比如fakeTransactions.json和FakeTransactions.json会被视为不同文件。

2. Axios请求逻辑未正确处理异步 #

• 检查请求代码是否完成异步处理，未处理的异步请求不会返回数据：

  // 错误示例：未处理异步回调
  useEffect(() => {
    axios.get('FakeTransactions.json');
  }, []);
  

  正确的异步处理写法：

  useEffect(() => {
    const fetchTransactions = async () => {
      try {
        const res = await axios.get('/FakeTransactions.json');
        console.log(res.data); // 先在控制台确认是否拿到数据
        setTransactions(res.data);
      } catch (err) {
        console.error('请求失败:', err);
      }
    };
    fetchTransactions();
  }, []);
  

• 查看控制台请求状态码：404表示路径错误，500可能是JSON文件格式损坏。

3. JSON文件格式或数据结构不符合要求 #

• 校验JSON语法：确保没有多余逗号、引号不配对等语法错误，可通过JSON校验工具检查。
• 确认数据结构适配DataGrid：DataGrid要求数据是数组，且每个行对象需要唯一标识（默认是id字段，若无则需手动指定）：

  // 正确的JSON格式示例
  [
    {"id": 1, "amount": 150, "date": "2024-05-01"},
    {"id": 2, "amount": 300, "date": "2024-05-02"}
  ]
  

  若数据无id字段，需在DataGrid中配置唯一标识：

  <DataGrid
    rows={transactions}
    columns={columns}
    getRowId={(row) => row.transactionNo} // 替换为你的唯一字段名
  />
  

4. DataGrid配置错误 #

• 核对columns的field属性：必须与数据对象中的键名完全匹配，比如：

  const columns = [
    { field: 'id', headerName: '交易ID', width: 80 },
    { field: 'amount', headerName: '交易金额', width: 120 },
    { field: 'date', headerName: '交易日期', width: 160 },
  ];
  

• 确认rows状态已正确赋值：打印transactions状态，检查是否有数据传入DataGrid。

5. 状态初始化问题 #

• 确保transactions状态初始化为空数组，而非null或undefined：

  const [transactions, setTransactions] = useState([]);
  

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