引入本地JSON文件时MUI DataGrid无法加载数据

你代码的核心问题是混用了两种完全不同的本地JSON加载逻辑，属于API用法错误：

• require('./data.json')是CommonJS规范的模块导入语法，构建工具（Webpack/Vite等）会在编译阶段直接读取JSON文件，把内容解析为原生JavaScript对象赋值给jsonData变量，这个变量本身就是你存的任务数组，不是可供fetch调用的URL地址或Request实例。
• fetch方法仅支持传入网络请求路径、符合规范的Request对象作为入参，你把解析好的普通JS对象传进去后，内部尝试将其转为合法请求地址时会直接抛出类型错误，请求根本不会正常发送。
• 额外问题：你的catch块没有编写任何错误打印、提示逻辑，抛出的错误被直接吞掉，导致你没法第一时间从控制台定位到问题。如果是用Vite这类默认不支持CommonJSrequire语法的构建工具，代码运行到require那一行就会直接报语法错误。

根据你的项目场景二选一即可：

方案1：直接导入JSON（适合小体积数据，写法最简单） #

无需写异步请求逻辑，在模块顶层直接导入本地JSON文件，构建工具会自动完成解析，拿到的直接是可使用的JS数据：

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';
// 顶层直接导入本地JSON文件
import rawTaskData from './data.json';

export default function TaskGrid() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // 导入的数据已经是解析好的对象，直接赋值给state即可
    setTasks(rawTaskData);
    console.log('加载的任务数据：', rawTaskData);
  }, []);

  return (
    <div style={{ width: '100%', height: 500 }}>
      <DataGrid
        rows={tasks}
        // 其余列配置、分页等参数正常编写即可
      />
    </div>
  )
}

注意：这种写法会把JSON内容直接打包进业务JS文件，如果你的JSON体积超过1MB，不建议使用，会拖慢首屏加载速度。

方案2：静态资源请求加载（适合大体积数据） #

如果要走fetch异步请求的逻辑，就不要用require引入文件，把data.json放到项目的静态资源目录（CRA/Webpack/Vite的默认静态目录都是public文件夹），之后直接用绝对路径请求即可：

import { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid';

export default function TaskGrid() {
  const [tasks,setTasks] = useState([]);

  const fetchData = async () => {
    try{
      // 直接请求public目录下的静态资源，无需require引入
      const res = await fetch('/data.json');
      if (!res.ok) throw new Error('网络请求失败');
      const tasksData = await res.json();
      setTasks(tasksData);
      console.log('加载的任务数据：', tasksData);
    } catch(err){
      // 记得打印错误方便排查
      console.error('数据加载失败：', err);
    }
  }

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

  return (
    <div style={{ width: '100%', height: 500 }}>
      <DataGrid
        rows={tasks}
        // 其余配置正常编写
      />
    </div>
  )
}

这种写法下JSON文件不会被打包进业务JS包，会在页面运行时单独发起请求加载，更适合体积较大的JSON数据。

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