[英]Error when getting values from json to data table
I created an app in React and Flask that loads some json info into a data table.我在 React 和 Flask 中创建了一个应用程序,它将一些 json 信息加载到数据表中。 In the console.log I can see it but I didn`t manage to put it in the data table.在 console.log 中我可以看到它,但我没有设法将它放入数据表中。 I am using Material-UI and React我正在使用 Material-UI 和 React
This is the code:这是代码:
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;
When I run the app the data loads in the console I can see the info but it doesn t load in the data-table.当我运行应用程序时,数据会加载到控制台中,我可以看到信息,但它不会加载到数据表中。 It`s my first time using React.这是我第一次使用 React。 The error is:错误是:
./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 |
In your code,在您的代码中,
const rows = [
{ id: 1, cnp: .data.cui, cui: data.cui, mesaje: data.mesaje, serial: data.serial, titlu: data.titlu
},
You have added,您已添加,
cnp: .data.cui
This is causing the issue.这导致了这个问题。 I believe it should be,我相信应该是
cnp: data.cui
Note: The extra .
注意:额外的.
It looks like you're having issues with data
not being defined while trying to access it (that's assuming you've resolved the invalid syntax of .data.cui
).看起来您在尝试访问data
遇到了未定义data
问题(假设您已经解决了.data.cui
的无效语法)。
Assuming it is an issue with data
being undefined (because it's not in scope when trying to access it) you could try something like this:假设这是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,
},
];
}
Note that this does not perform any error handling, however as a first pass can hopefully get you going!请注意,这不会执行任何错误处理,但是作为第一遍,有望让您继续前进!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.