时间戳

首页 > 解决方案 > 使用 Axios 并使用 React-table 创建表时，data.forEach 不是函数

javascript - 使用 Axios 并使用 React-table 创建表时，data.forEach 不是函数

问题描述

我正在使用 react-table 库和 axios 从 api 进行 get 调用。我的使用效果是这样的。

 const [data, setData] = useState([]);
      useEffect(() => {
        (async () => {
          const result = await axios("http://site");
          setData(result.data)
        })();
      }, []);

  return (

    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );

但是，在尝试渲染表格时出现错误。我得到的错误似乎来自我的 Table.js 文件

错误：表格

src/Table.js:8
   5 | 
   6 | const [filterInput, setFilterInput] = useState("");
   7 | // Use the state and functions returned from useTable to build your UI
>  8 | const {
     | ^   9 |   getTableProps,
  10 |   getTableBodyProps,
  11 |   headerGroups,

我是使用 react-table 的新手，有什么想法吗？我做了 console.log 结果，它作为一个对象进来。

标签： javascriptreactjsaxiosreact-hooksreact-table

解决方案

您需要某种“加载”组件，该组件将呈现直到您的 axios 完成并且您有数据要呈现。你可以像这样使用它：

return !data.length ? (<div>Loading..</div>) : (<div className="App">
  <Table columns={columns} data={data} />
</div>)

推荐阅读