React从Node后端取JSON填充DataGrid时出现TypeError求助

核心问题分析 #

• useEffect无限循环：你的useEffect没有设置依赖数组，会在组件每次渲染时重复执行，导致articles和articleKeys被频繁更新，触发DataGrid反复渲染，最终引发DOM相关错误（即你看到的measuringCell.getBoundingClientRect报错）。
• columns格式不符合要求：多数React DataGrid组件（比如Material UI的DataGrid）不接受单纯的字符串数组作为columns参数，而是需要包含field（对应数据字段名）、headerName（表头显示文本）等属性的对象数组。
• 未处理数据为空的边界情况：如果后端返回空数组，data[0]会是undefined，调用Object.keys(data[0])会直接报错，破坏组件渲染流程。

修正后的代码 #

React组件代码 #

const MemberPage = () => {
    const [articles, setArticles] = useState([])
    const [columns, setColumns] = useState([])

    useEffect(() => {
        // 只在组件挂载时执行一次fetch
        fetch("http://localhost:3001/articles")
            .then((res) => {
                // 检查响应是否成功
                if (!res.ok) throw new Error('请求失败')
                return res.json()
            })
            .then((data) => {
                setArticles(data)
                // 处理数据为空的情况
                if (data.length > 0) {
                    // 将键名转换为DataGrid需要的columns格式
                    const gridColumns = Object.keys(data[0]).map(key => ({
                        field: key,
                        headerName: key.charAt(0).toUpperCase() + key.slice(1), // 首字母大写作为表头
                        width: 200 // 可自定义列宽
                    }))
                    setColumns(gridColumns)
                }
            })
            .catch(err => console.error('获取数据失败:', err))
    }, []) // 空依赖数组，确保只执行一次

    // 数据未准备好时显示加载状态
    if (columns.length === 0 || articles.length === 0) {
        return <div>加载中...</div>
    }

    return (
        <div id="memberpage-main-container">
            <DataGrid columns={columns} rows={articles} />
        </div>
    )
}

额外说明 #

• 若使用其他DataGrid组件（比如AG Grid），columns格式可能略有差异，但核心逻辑一致：需传入包含字段映射的配置数组，而非单纯的键名。
• 新增错误捕获逻辑，避免请求失败时组件崩溃。
• 新增加载状态，既提升用户体验，也避免数据未就绪时渲染DataGrid引发异常。

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