从 JSON 获取值到数据表时出错

Question

我在 React 和 Flask 中创建了一个应用程序，可以将一些 json 信息加载到数据表中。 在控制台中.log我可以看到它，但我没有设法将其放入数据表中。 我正在使用 Material-UI 和 React

这是代码：

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button';
import { DataGrid } from '@material-ui/data-grid';


function App() {
const columns = [
{ field: 'cnp', headerName: 'CNP', width: 130 },
{ field: 'cui', headerName: 'CUI', width: 130 },
{ field: 'mesaje', headerName: 'Mesaje', width: 130 },
{ field: 'serial', headerName: 'Serial',width: 130,},
{ field: 'titlu', headerName: 'Titlu', width: 130,},
];

useEffect(() => {
fetch('http://127.0.0.1:5000/formular',{
headers : { 
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(response =>
response.json().then(data =>{
console.log(data);
})
);
},[]);
const rows = [
{ id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: data.titlu 
},
];

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
return <div className="App">
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" ></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<h1>Lista mesaje</h1>
<Button variant="contained" color="primary">
refresh
</Button>
<br></br>
<div style={{ height: 400, width: '100%' }}>
<DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
</div>

</div>;
}
export default App;

当我运行应用程序时，数据在控制台中加载，我可以看到信息，但它不会加载到数据表中。 这是我第一次使用 React。错误是：

./src/App.js
Line 38:19:  Parsing error: Unexpected token
36 | 
37 |   const rows = [
> 38 |     { id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: 
data.titlu },
|                   ^
39 | 
40 |   ];
41 | 

Answer 1

在你的代码中，

const rows = [
{ id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: data.titlu 
},

您已添加，

cnp: .data.cui

这导致了问题。我相信应该是，

cnp: data.cui

注意：额外的.

Answer 2

看起来您在尝试访问它时遇到未定义data的问题(假设您已经解决了.data.cui的无效语法)。

假设这是未定义data的问题(因为它在尝试访问它时不在范围内)，您可以尝试这样的事情：

import React, { useEffect, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "@material-ui/core/Button";
import { DataGrid } from "@material-ui/data-grid";
function App() {
const columns = [
{ field: "cnp", headerName: "CNP", width: 130 },
{ field: "cui", headerName: "CUI", width: 130 },
{ field: "mesaje", headerName: "Mesaje", width: 130 },
{ field: "serial", headerName: "Serial", width: 130 },
{ field: "titlu", headerName: "Titlu", width: 130 },
];
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const rawData = await fetch("http://127.0.0.1:5000/formular", {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const fetchedData = await rawData.json();
setData(fetchedData);
};
fetchData();
}, []);
const rows = [
{
id: 1,
cnp: data?.cui,
cui: data?.cui,
mesaje: data?.mesaje,
serial: data?.serial,
titlu: data?.titlu,
},
];
}

请注意，这不会执行任何错误处理，但是作为第一次传递，希望可以让你继续！