ReactJS 解析 json 文件时返回 props.value.map 不是函数

Question

我正在尝试使用 PrimeReact 自学 ReactJS。我正在制作一个简单的应用程序来跟踪我拥有的钱包中的加密资产。我有这段代码来创建一个包含来自 json 文件的基本数据的表：

import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import jsonData from './EVM.json'; // Assuming EVM.json is inside the src directory

const TokenTable = ({ data }) => {
  console.log('Data:', data);
  const header = (
    <div>
      List of Tokens
    </div>
  );

  return (
    <div>
      <DataTable value={data} header={header}>
        <Column field="WalletTokenIcon" header="Token Icon"></Column>
        <Column field="TokenName" header="Token Name"></Column>
        <Column field="TokenQTY" header="Token Quantity"></Column>
        <Column field="TokenPrice" header="Token Price"></Column>
        <Column field="TokenValue" header="Token Value"></Column>
        <Column field="TokenPercentIncrease" header="Token Percent Increase"></Column>
      </DataTable>
    </div>
  );
};

const TokenTableContainer = () => {
  const [tokenData, setTokenData] = useState([]);

  useEffect(() => {
    setTokenData(jsonData); // Use jsonData directly
  }, []);

  return <TokenTable data={tokenData} />;
};

export default TokenTableContainer;

我正在开发一个视图，当您单击该视图中的按钮时，它会调用此函数。但是，它抛出了这个错误：

我已使用 Chrome 控制台确认它正在提取数据。这是测试数据的样本，因此这里没有识别信息：

这里有一个 json 数据结构的示例，仅供参考：

{
    "WalletTokenIcon":"Img\\Icons\\Evm\\eth.png",
    "TokenName":"ETHEREUM MAINNET",
    "TokenQTY":"0.000000000000000000 ETH",
    "TokenPrice":"$0.00",
    "TokenValue":"$0.00",
    "TokenPercentIncrease":"0%"
}

关于为什么会抛出该错误的任何想法。它返回有效的 json 数据，但我似乎无法理解为什么将其放入表中时出现问题。

Answer 1

在这种情况下，当您打印

data

时，控制台会将该值显示为对象。

DataTable

组件似乎正在尝试迭代提供的

value

，但该值设置为对象，因此不具有

map

属性。

从文档来看，

DataTable

需要一个

value

数组，而不是一个对象。 https://primereact.org/datatable/#api.DataTable.props.value）

要解决此问题，请将

TokenData

数组传递给

value

属性而不是数据对象。

<DataTable value={data.TokenData} header={header}>