Не могу проанализировать json данных в React, не зная каких-либо концептуальных ошибок, которые я мог бы

Question

Я использую материалыUItable для отображения данных таблицы, я использую React в качестве моей структуры

Я импортирую файл JSON из аналогичного каталога root, и я пытаюсь отобразить данные в этом json file

import MaterialTable from 'material-table';
import jsondata from "./data.json"



export default function MaterialTableDemo() {

  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    ],


 data: [
    jsondata.data.map(Array => Array)
 ]

  });

вышеописанный метод не показывает ошибок, но хотя таблица отображается, она просто показывает пустую таблицу: / Может кто-нибудь объяснить мне, почему данные не отображаются?

это был еще один метод, который я пытался использовать, хотя ошибки не отображаются, данные не отображаются, и отображается пустая таблица

JSON.parse(jsondata)

это был другой метод, который я пробовал, но все, что отображалось, было пустой страницей, таблица не отображается: /

Я действительно смущен тем, почему данные не отображаются, какие концептуальные ошибки я делаю при попытке отобразить данные?

Answer 1

Я не использовал material-table раньше, но я быстро просмотрел его do c здесь , и у них есть пример данных, передаваемых вот так

data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }]}

Вы можете видеть, что data является объектом, обертывающим массив объекта , однако вот ваш код:

data: [
  jsondata.data.map(Array => Array)
]

Я предполагаю, что вы передаете данные следующим образом:

data={data}

, поскольку map вернет массив, вы передаете что-то вроде этого:

data={[[*contentOfYourArray*]]}

, то есть объект, обертывающий массив массива , вам следует вместо этого напишите так:

data: jsondata.data.map(Array => Array)

Кроме того, data должен быть массивом объектов, поэтому я предполагаю, что ваш jsondata.data тоже массив объектов, так что на самом деле ...

data: jsondata.data

Или, если вы хотите сделать массив данных:

data: jsondata.data.map(object => return {
    name: object.field1,
    surename: object.field2
})