React MUI X Data Grid axios异步取数后无行数据显示问题

• 未使用React状态管理表格数据源：主组件中stats是普通局部变量，异步请求赋值后不会触发组件重渲染，DataGrid始终接收到初始空数组。同时请求回调内用let stats= response.stats声明了同名块级作用域变量，产生变量遮蔽，就算外层是普通变量也不会被修改。
• 请求函数逻辑错误：getAllStats混用async/await和.then链式写法，函数内没有正确return最终结果，外层调用时实际拿到的返回值为undefined。
• 错误捕获语法无效：try/catch无法直接捕获未加await的Promise异步错误，原有catch{err=>console.log(err)}写法不符合语法规范，请求报错时无法正常捕获。
• 组件命名不匹配：Grid组件定义名为Grid，导出名为StatsGrid，导入时名称不一致会导致组件渲染异常。
• DataGrid行标识缺失：MUI X Data Grid默认要求每行数据必须带唯一id字段，若返回数据无该字段且未手动指定行标识，会导致行无法正常渲染。

1. 用useState声明表格数据的响应式状态，异步拿到数据后通过状态更新函数修改值，触发组件重渲染
2. 统一请求函数的异步写法，去掉冗余的.then链式调用，正确返回接口响应结果
3. 修正异步错误捕获逻辑，在useEffect内用async函数包裹请求逻辑，配合try/catch/finally处理请求状态和错误
4. 统一组件定义名和导出名，给DataGrid传入loading状态优化交互
5. 给DataGrid配置getRowId属性，适配接口返回数据的唯一标识字段，避免因缺失id导致行不渲染

修复后完整代码 #

接口请求函数 #

import axios from 'axios';
const SRVADDRESS = 'http://localhost:31096/api'

export const getAllStats = async (object) =>{
    const {clientName, clientId, isMobile, token } = object
    const eventToReq = {
        clientName,
        clientId,
        isMobile
    }
    const config = {
        headers:{
            Authorization:'Bearer ' + token
        }
    }
    const res = await axios.post(`${SRVADDRESS}/getAllStats`,eventToReq, config)
    return res.data[0]
}

主组件 #

import { useState, useEffect, useContext } from 'react';
// 其他依赖导入省略

const Main = () => {
    const user = useContext(AuthContext)
    // 声明响应式状态管理表格数据、加载状态
    const [stats, setStats] = useState([])
    const [loading, setLoading] = useState(false)

    const requestParams = {
        clientName:user.auth.clientName,
        clientId:user.auth.clientId,
        isMobile:mobile(),
        token:user.auth.token
    }

    useEffect(()=>{
        const fetchTableData = async () => {
            setLoading(true)
            try {
                const res = await getAllStats(requestParams)
                console.log('接口返回结果：', res)
                const tableRows = res.stats
                console.log('表格行数据：', tableRows)
                // 更新状态触发重渲染
                setStats(tableRows)
            } catch (err) {
                console.log('数据请求失败：', err)
            } finally {
                setLoading(false)
            }
        }
        // 鉴权信息存在时再发请求，避免初始状态报错
        if(user?.auth?.token) {
            fetchTableData()
        }
    },[user])
    
  return (
      <div>
          <Container>
            <StatsGrid stats={stats} columns={columns} loading={loading}/>
        </Container>
    </div>
  )
}

export default Main

DataGrid包装组件 #

import { DataGrid } from '@mui/x-data-grid';
import { TableContainer } from '@mui/material';
// 其他依赖导入省略

const StatsGrid= (props) => {
const { stats: rowsData, columns, loading } = props
  return (
    <TableContainer>
    <DataGrid
      columns={columns}
      rows={rowsData}
      autoHeight
      loading={loading}
      rowsPerPageOptions={[100]}
      checkboxSelection={false}
      // 若接口返回数据唯一标识不是id，替换为对应字段名即可
      getRowId={(row) => row.id || row.statsId || row.clientId}
    />
  </TableContainer>
  );
}
export default StatsGrid

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