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文件获取数据

1 个答案: