反应挂钩 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);

我正在关注这个 link 唯一的区别是我想从后端节点 api.

的文件加载数据

Answer 1

您正在使用 rows 和 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 ....

反应挂钩 axios 调用无法加载网格

react hooks axios call failing to load grid

reactjs

async-await

react-hooks

react-data-grid