ReactJS Возврат props.value.map не является функцией при анализе файла json

Я пытаюсь научиться ReactJS, используя PrimeReact. Я делаю простое приложение для отслеживания криптоактивов в моем кошельке. у меня есть этот код для создания таблицы с базовыми данными из файла 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.info('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, но я не могу понять, почему возникают проблемы с помещением их в таблицу.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В этом случае, когда вы печатаете data, консоль отображает значение как объект. Похоже, что компонент DataTable пытается выполнить итерацию по предоставленному value, но значение установлено для объекта и, следовательно, не имеет свойства map.

Из документации DataTable требуется массив для value, а не объект. https://primereact.org/datatable/#api.DataTable.props.value)

Чтобы исправить это, передайте массив TokenData свойству value вместо объекта данных.

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

Обновлено: теперь он работает. Отмечено как ответ

Alex Frankland 08.04.2024 14:07

Я думаю, проблема в том, что jsonData не является массивом и поэтому не распознает метод map(). Судя по тому, что я вижу на скриншоте вашей консоли, jsonData — это объект, содержащий один элемент:

{
  TokenData: [...]
}

Я полагаю, что атрибут TokenData — это то, что вы хотите передать TokenTable, поэтому вам следует использовать jsonData.TokenData. Поскольку это массив, метод map() должен быть распознан.

Другие вопросы по теме