如何对本地 json 文件使用 react-table？

Question

我有一个关于使用来自 React.js 的 react-table 的相当简单的问题。

我找不到关于本地 json useMemo 的任何示例或文档，几乎所有教程都基于 asyn api。

本教程与我的唯一区别是 makeData 文件是具有合法数据的实际 json 文件。

这是我试过的：

  const data = React.useMemo(() => Sales, [])

这显然不起作用，并发回 TypeError: Cannot read 属性 'forEach' of undefined.

我该如何处理？

Answer 1

看起来 useMemo 希望将数据格式化为包含对象的数组，而不是您当前提供的原始 json 格式。

正在导入 JSON

根据可用的模块，使用内置的 json 加载程序，或者将 json 文件包装在 ts/js 文件中，例如

const Data = { "thing": "value }
export default Data

并通过

导入

import jsonData from './data.json'

正在处理 JSON

可能有更优雅的方式来做到这一点，在这种情况下，我能够通过创建一个辅助函数来预处理数据来实现某些功能。它只是利用 keys/map 遍历 JSON 并将每个值填充到数组中。

function processData(jsonData) {
  const result = Object.keys(jsonData).map((key) => { 
    return jsonData[key];
  });
  return result;
}

因此，根据您提供的示例而不是

const data = React.useMemo(() => makeData(100000), []);

这条线是

const data = React.useMemo(() => processData(jsonData), []);

Answer 2

错误信息：

TypeError: Cannot read property 'forEach' of undefined

是由于函数Table下没有添加“行”属性造成的，添加行和页。在页面下添加行，以及：

const data = React.useMemo(() => processData(jsonData), []);

和：

function processData(jsonData) {
  const result = Object.keys(jsonData).map((key) => {return jsonData[key]; });
  return result;
}

How to use react-table for a local json file?