如何在 React 中从外部 json 文件中获取数据

Question

我正在研究 React Table。如何从外部 json 文件中获取数据并显示该 json 文件中的数据？

这是我的 CodeSandbox - https://codesandbox.io/s/jl8zznpzyv

我添加了一个 json 文件。作为 React 的初学者，我不知道如何从外部 json 文件获取数据并显示该 json 文件中的数据。

Answer 1

通过变量（使用 let、const）导出您的 JSON 文件，并将其导入到您需要 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>
          )
     }
}

如何在 React 中从外部 json 文件中获取数据

How to fetch data from external json file in React

javascript

json

reactjs

react-table