從json獲取值到數據表時出錯

Question

我在 React 和 Flask 中創建了一個應用程序，它將一些 json 信息加載到數據表中。 在 console.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問題（假設您已經解決了.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,
    },
  ];
}

請注意，這不會執行任何錯誤處理，但是作為第一遍，有望讓您繼續前進！