使用React钩子获取数据会导致空匹配数组

问题描述 投票:0回答:2

我正在尝试使用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时,结果为空数组,该表显示零行。

我想念的是什么?可能是生命周期问题,但如何解决?

reactjs react-hooks
2个回答
0
投票
列与从API返回的属性和数据结构匹配即可。

假设您返回的数据如下所示:

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示例。

© www.soinside.com 2019 - 2024. All rights reserved.