Как получить данные из внешнего файла JSON в React

Question

Я работаю над React Table.Как я могу получить данные из внешнего файла json и отобразить данные из этого файла json?

Вот мой CodeSandbox - https://codesandbox.io/s/jl8zznpzyv

Я добавил файл json.Будучи новичком в React, я не знаю, как извлечь данные из внешнего файла json и отобразить данные из этого файла json.

Answer 1

Экспортируйте файл JSON через переменную (используя let, const) и импортируйте его в свой файл, где вам нужны эти данные JSON.

посмотрите: -

sample.js

const sampleData = [
   {
     "firstName": "Sam",
     "lastName": "Jones",
     "age": "a"
   },
  {
     "firstName": "Sam1",
     "lastName": "Jones1",
     "age": "a"
   },
]

export default sampleData;

и теперь импортирую его в мой файл, где я хочу использовать свои данные

home.js

import React, { Component } from 'react'
import sampleData from './sample.json'

export default class Home extends Component{
    render(){
         return(
              <div>
                { sampleData.map((item, i) => {
                   return (
                        <div>
                          <h4> My Name is {item.firstName} {item.lastName} and my age is {item.age}.</h4>
                        </div>
                   )
                 }
              </div>
          )
     }
}