Я пытаюсь научиться 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, но я не могу понять, почему возникают проблемы с помещением их в таблицу.





В этом случае, когда вы печатаете data, консоль отображает значение как объект. Похоже, что компонент DataTable пытается выполнить итерацию по предоставленному value, но значение установлено для объекта и, следовательно, не имеет свойства map.
Из документации DataTable требуется массив для value, а не объект. https://primereact.org/datatable/#api.DataTable.props.value)
Чтобы исправить это, передайте массив TokenData свойству value вместо объекта данных.
<DataTable value = {data.TokenData} header = {header}>
Я думаю, проблема в том, что jsonData не является массивом и поэтому не распознает метод map(). Судя по тому, что я вижу на скриншоте вашей консоли, jsonData — это объект, содержащий один элемент:
{
TokenData: [...]
}
Я полагаю, что атрибут TokenData — это то, что вы хотите передать TokenTable, поэтому вам следует использовать jsonData.TokenData. Поскольку это массив, метод map() должен быть распознан.
Обновлено: теперь он работает. Отмечено как ответ