我正在尝试使用React Hooks获取数据。似乎一切正常,但是即使正确提取了数据,hits
数组也为空。
这是我的代码:
import React, { useState, useEffect } from 'react';
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
export default function Dashboard(props) {
var classes = useStyles();
var theme = useTheme();
// local
var [mainChartState, setMainChartState] = useState("monthly");
const [data, setData] = useState({ hits: [] });
const url = my_url;
useEffect(() => {
const fetchData = async () => {
const result = await axios(
url,
);
setData(result.data);
console.log(result.data);
console.log(data);
};
fetchData();
}, []);
return (
<Grid item xs={12}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
title="Analyzed DAOs"
data={data.hits}
columns={["Name", "Members", "Proposals", "Voters"]}
options={{
filterType: "checkbox",
}}
/>
</MuiThemeProvider>
</Grid>
)
}
[打印出result.data
时,我得到了一个包含5个对象的数组(应如此),但是打印出data.hits
时,结果为空数组,该表显示零行。
我想念的是什么?可能是生命周期问题,但如何解决?
假设您返回的数据如下所示:
const data = [
{
name: "Joe James",
company: "Test Corp",
city: "Yonkers",
state: "NY"
...
},
// more objects
];
您将需要像这样设置列:
const columns = [
{
name: "name", // This should match the data property
label: "Name", // Label will be shown
options: {...}
},
{
name: company,
label: "Company",
options: {...}
},
{
// More columns for `city` and `state` etc...
}
请遵循此codeSandbox示例。