从 json 获取值到数据表时出错答案

【问题标题】：Error when getting values from json to data table从 json 获取值到数据表时出错
【发布时间】：2021-01-23 04:36:01
【问题描述】：

我在 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 |

【问题讨论】：

看起来cnp: .data.cui 应该是cnp: data.cui。从 API 调用返回的数据是什么样的？
我删除了 data 之前的点，现在它给了我这个错误：./src/App.js Line 38:19: 'data' is not defined no-undef Line 38:34: 'data ' 未定义 no-undef 第 38:52 行：'data' 未定义 no-undef 第 38:73 行：'data' 未定义 no-undef 第 38:93 行：'data' 未定义 no-undef
这是因为data 仅在您正在编写的承诺范围内可用。尝试将data 值分配给与rows 处于相同或更高范围内的另一个变量。

标签： javascript json reactjs datatable material-ui

【解决方案1】：

您在尝试访问 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,
    },
  ];
}

请注意，这不执行任何错误处理，但是作为第一次通过希望可以让您继续前进！

【讨论】：

【解决方案2】：

在您的代码中，

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

注意：多余的.

【讨论】：