React:创建一个使用Http GET请求数据的表

Question

我一直在努力与这个库和javascript。事情是这样的，我想用从Http Get请求收集的数据建立一个表。我可以获得数据，但我无法使用数据。它说这是一个空数组

代码如下:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { DataGrid } from "@material-ui/data-grid";
function ServersTable() {
const [loadingData, setLoadingData] = useState(true);
const [serverData, setServerData] = useState([]);
const [rows, setRows] = useState([]);
const columns = [
{ field: "hostname", headerName: "Hostname", width: 70 },
{ field: "memory", headerName: "Memória", width: 70 },
{ field: "vCpus", headerName: "vCPUs", width: 70 },
{ field: "disk", headerName: "Disco", width: 70 },
{ field: "ip", headerName: "IP", width: 70 },
];
useEffect(() => {
async function getData() {
await axios
.get("http://localhost:3333/servers")
.then((response) => {
setServerData(response.data);
fillRows();
setLoadingData(false);

})
}
if (loadingData) {
getData();
}
}, []);
function fillRows() {
let rowArray = [];
for (let count = 0; count < serverData.length; count++) {
let row;
row = {
id: count,
hostname: serverData[count].hostname,
memory: serverData[count].configuracao.memoryProvisioned + " GB",
vCpus: serverData[count].configuracao.cpuProvisioned + " vCPUs",
disk: serverData[count].configuracao.totalDiskGB + " GB",
ip: serverData[count].ip,
};
rowArray.push(row);
}
setRows(rowArray);
}
return (
<>
{loadingData ? (
<p>Loading Please Wait...</p>
) : (
<DataGrid rows={rows} columns={columns} checkboxSelection />
)}
{console.log("Server Data:")}
{console.log(serverData)}
{console.log("Rows:")}
{console.log(rows)}
</>
);
}
export default ServersTable;

我想我正在努力理解异步是如何工作的，我试图在它准备好之前访问数据。虽然我试了所有的方法让它工作，等待数据准备好。

有人能帮我吗?

Answer 1

这是由于setState的异步特性。在这种情况下，使用Callback可以提供帮助。我刚刚编辑了你的getData函数。

async function getData() {
await axios
.get("http://localhost:3333/servers")
.then((response) => {
setServerData(response.data, () => {
fillRows();
setLoadingData(false);
}); 
})
}

Answer 2

这里的问题是，setState钩子不同步更新。查看更多信息。

那么，这个语句:

setServerData(response.data);

不会立即改变您的serverData，因此在您的fillRows()函数中，serverData被认为是空数组，因为您在setState初始化器中将其定义为空数组。

(因为有很多解决方案来解决这个问题)你可以传递response.data到fillRows函数(而不是使用从状态获取serverData)，如👉fillRows(response.data)。

因此，将fillRows函数更改为

function fillRows(responseData) {
let rowArray = [];
for (let count = 0; count < responseData.length; count++) {
let row;
row = {
id: count,
hostname: responseData[count].hostname,
memory: responseData[count].configuracao.memoryProvisioned + " GB",
vCpus: responseData[count].configuracao.cpuProvisioned + " vCPUs",
disk: responseData[count].configuracao.totalDiskGB + " GB",
ip: responseData[count].ip,
};
rowArray.push(row);
}
setRows(rowArray);
}