NodeJS React -使用从节点后端获取的json填充数据网格- TypeError null不是对象

hrirmatl 于 2023-01-16 发布在 Node.js

关注(0)|答案(1)|浏览(55)

我尝试用节点后端提供的JSON中的数据填充React DataGrid。
后端代码如下所示：

app.get("/articles", (req, res) => {
res.json([
    {
        "title":"Test Article One",
        "timestamp":"09-01-2023",
        "text":"Test text one"
    },
    {
        "title":"Test Article Two",
        "timestamp":"10-01-2023",
        "text":"Test text two"
    },
    {
        "title":"Test Article Three",
        "timestamp":"11-01-2023",
        "text":"Test text three"
    }])
})

React代码如下所示：

const MemberPage = () => {
    const [articles, setArticles] = useState([])
    const [articleKeys, setArticleKeys] = useState([])

    useEffect(() => {
        fetch("http://localhost:3001/articles")
        .then((res) => res.json())
        .then((data) => {
            setArticles(data)
            setArticleKeys(Object.keys(data[0]))
        })
    })

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

我收到错误消息TypeError：null不是浏览器控制台中的对象（求值为'measuringCell. getBoundingClientRect'），因此页面不会呈现。我首先想到的是，这是因为DataGrid在useEffect获取数据之前呈现，而我在其他答案中已经提到了这一点，然而，当我写道：
常量文章关键字=[]
常数项=[]
它可以工作（我的意思是，它是一个空页面，但我没有收到任何错误）。因此，我希望在设置useState（[]）时不会出现问题。
任何帮助都很感激。

node.js

来源：https://stackoverflow.com/questions/75114920/react-fill-datagrid-with-json-fetch-from-node-backend-typeerror-null-is-not

1条答案

按热度按时间

suzh9iv81#

所以，我找到了一个解决方案，从react-data-grid切换到@mui/x-data-grid。
代码现在如下所示：

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

const MemberPage = () => {

    const [articles, setArticles] = useState([])
    const [articleKeys, setArticleKeys] = useState([])

    function parseArticleKeys(keys) {
        let tableColumns = []
        for (let i = 0; i < keys.length; i++) {
            tableColumns.push({field: keys[i], headerName: keys[i], width: 300})
        }
        return tableColumns
    }

    useEffect(() => {
        fetch("http://localhost:3001/articles")
        .then((res) => res.json())
        .then((data) => {
            setArticles(data)
            setArticleKeys(Object.keys(data[0]))
        })
    })

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

export default MemberPage

我也尝试过类似的react-data-grid，但是没有成功，如果有人有一个想法可以用react-data-grid来实现，它可能对其他人有帮助，但是我个人对这个解决方案没有意见。

赞(0）回复(0）举报 2023-01-16

我来回答

NodeJS React -使用从节点后端获取的json填充数据网格- TypeError null不是对象

1条答案

相关问题

热门标签

最新问答