Question

2021-05-19

707

arrays json reactjs pagination react-table

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

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

本教程和我的唯一区别是 makeData 文件是一个包含合法数据的实际 json 文件。

这是我尝试过的：

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

显然没有工作，并返回 TypeError：无法读取未定义的属性“forEach”。

我该如何处理这个问题？

Answer 1

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

导入 JSON

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

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

并通过

import jsonData from './data.json'

处理 JSON

可能有更优雅的方式来做到这一点，在这种情况下，我能够通过创建一个辅助函数来预处理数据来使某些工作正常进行。它只是利用了使用键/映射来迭代 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、add rows 和 pages 下方添加“rows”属性而导致的。在 page 下添加 rows，以及：

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

和：

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