react hooks axios调用无法加载网格

Question

我有下面的代码，但我的网格没有用下面的代码加载，没有错误。我相信这是由于异步axios调用，但我不知道如何逃脱惩罚。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";
import axios from 'axios';
const selectors = Data.Selectors;
function getRows(rows, filters) {
  return selectors.getRows({ rows, filters });
}
function Example() {
  let rows = [];
  let filteredRows = [];
  const [filters, setFilters] = useState({});
  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        rows = response.data;
        filteredRows = getRows(rows, filters);
        console.log(filteredRows)         // this works fine and gets me the result
      }
      anyNameFunction();
  }, [])
  return (
    <ReactDataGrid             // this grid is empty
      columns={columns}
      rowGetter={i => filteredRows[i]}
      rowsCount={filteredRows.length}
      minHeight={500}
      toolbar={<Toolbar enableFilter={true} />}
      onAddFilter={filter => setFilters(handleFilterChange(filter))}
      onClearFilters={() => setFilters({})}
    />
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

我关注这个链接唯一的区别是我想从一个文件加载数据，这个文件是后端节点api。

Answer 1

您正在使用行和filteredRows作为数组。您的函数组件不知道发生了什么变化，因为您没有在状态中设置任何内容，因此没有理由在响应到达后重新渲染。

-----编辑-----您并不真正需要行，因为您没有在任何地方使用它。

尝试进行以下更改：

  const [filteredRows, setFilteredRows] = useState([]);
  const [filters, setFilters] = useState({});
  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        setFilteredRows(getRows(response.data, {}));
      }
      anyNameFunction();
  }, [])

-----再次编辑-----在阅读了与网格包相关的所有内容后：

const [rows, setRows] = useState([]);
const [filters, setFilters] = useState({});
React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        setRows(response.data)
      }
      anyNameFunction();
  }, [])
const  filteredRows = getRows(response.data, filters);
return ....