Как получить доступ к файлу массива объектов в компоненте реакции?

Question

Я пытаюсь получить доступ к файлу массива объектов в папке src, например: data.js (только массив объектов), этот файл в мой app.js (компонент реагирования)

в первом сценарии 1. Я пыталсяЭта проблема с использованием реакции в

src - [app.js (компонент) /data.js (массив объектов)].

Когда я был запущен, он показывает мне ошибку вроде

(TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map не является функцией) означает нулевой массив / неопределенный.

во втором сценарии 2. когда я добавляю массив объектов в app.js на той же странице, он показывает мне идеальный результат.без ошибок, но пытается из другого файла, такого как data.js, он принимает нулевой массив, который я использовал для stringify() и анализатор JSON, но без результата

Файл массива объектов data.js ->

const datas=[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
    ];

реагирующий компонент app.js ->

import React from 'react';
import  datas from './data';
import  DataInfo from './DataInfo';
function App () {
 const appdata=datas.map( inner => inner.id + inner.firstname + inner.lastname)
//print on console
 console.log(appdata)
    return (
     <div className="App">
           <p>App js page</p>

              {appdata} 

      </div>
    )
  }
export default App;

ошибка ->

TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map is not a function
  21 | return (  
  22 |   
  23 |   
> 24 |   <div className="App">  
     |  ^  25 |   
  26 |        <p>App js page</p>  

фактический результат: -
Страница приложения js

1samparkar2juleefransic
и на консоли (2) ["1samparkar", "2juleefransic"] 0: "1samparkar" 1: "2juleefransic"

Answer 1

Вы можете использовать файл JSON следующим образом:

datas.json

[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
]

В app.js:

import datas from './datas.json';

Answer 2

Если вы используете файл JSON, сохраните этот файл как datas.json

Теперь в вашем файле app.js используйте <datas/> вместо {datas}.

, который вы можете использовать {datas} когда вы используете его в атрибуте jsx.например -

<textarea name="JSON" value={datas} />.

, но в вашем случае вы должны использовать <datas />.

Answer 3

Убедитесь, что вы экспортировали datas правильно

export const datas=[
  {
    "id": "1",
    "firstname": "sam",
    "lastname": "parkar"
  },
  {
    "id": "2",
    "firstname": "julee",
    "lastname": "fransic"
  }
];

А в app.js это называется так:

import  {datas} from './data';