ForwardRef(DataGrid)组件rows属性未定义报错求助

问题场景 #

跟随lamadev的YouTube教程开发MERN预订应用时，遇到Material-UI DataGrid必填属性报错：

Failed prop type: The prop rows is marked as required in ForwardRef(DataGrid), but its value is undefined

相关渲染代码：

return (
    <div className="datatable">
      <div className="datatableTitle">
        Add New User
        <Link to="/users/new" className="link">
          Add New
        </Link>
      </div>
      <DataGrid
        className="datagrid"
        rows={list}
        columns={userColumns.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
        getRowId = { (row)=>row._id}
      />
    </div>
  );

排查与解决步骤 #

• 初始化list变量，避免undefined
  组件渲染时list若未被赋值，会默认是undefined，直接传给rows就触发报错。用useState给list设置初始空数组：

  const [list, setList] = useState([]);
  

  或者直接在DataGrid的rows属性里做兜底：

  rows={list || []}
  

• 处理异步数据加载的时机
  如果list是通过API请求获取的，首次渲染时数据还未返回，list会是undefined。添加加载状态，在数据就绪前不渲染DataGrid：

  const [loading, setLoading] = useState(true);
  const [list, setList] = useState([]);
  
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch('/api/users'); // 替换为你的实际接口地址
        const data = await res.json();
        setList(data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);
  
  if (loading) return <div>加载中...</div>;
  

• 验证list的数据格式
  打印console.log(list)确认：

  1. list确实是数组类型，不是对象或其他类型
  2. 数组中的每个元素是包含_id等字段的对象（匹配getRowId的取值要求）

• 检查变量作用域
  确认list没有被定义在局部作用域（比如useEffect内部），导致组件渲染时无法访问到正确的变量值。

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