如何在反应打字稿中从json文件中获取和显示数据

Posted 2023-02-22

【中文标题】如何在反应打字稿中从json文件中获取和显示数据

【英文标题】：How to fetch and display data from json file in react typscript

【发布时间】：2021-03-21 02:09:44

【问题描述】：

我想在 typescript 中将数据显示为列表，我可以获取但无法显示它。我正在使用 map 访问 json 对象数组

//json file
[
  
    "id": "6s",
    "name": "Iphone6s"
  ,
  
    "id": "6",
    "name": "Iphone6"
  ,
  
    "id": "11",
    "name": "Iphone11"
  ,
  
    "id": "11pro",
    "name": "Iphone11Pro"
  ,
  
    "id": "11promax",
    "name": "Iphone11Max"
  ,
  
    "id": "12",
    "name": "Iphone12"
  
]

//App.tsx
import * as React from "react";
import "./styles.css";
import data from "./data.json";
console.log(data);

interface Phone 
  id: string;
  name: string;

export default function App() 
  return (
    <div className="App">
      <h1>Welcome to Apple Store!</h1>
      data.map((item, i) => 
        return <h2>Phone:data.name</h2>;
      )
    </div>
  );

可以看这里： https://codesandbox.io/s/iphonestore-zguzp?file=/src/App.tsx:0-367

【参考方案1】：

data.map((item, i) => <h2 key=i>Phone:item.name</h2>)

你的界面应该是这样的：

interface IPhone 
  id: string;
  name: string;


type PhoneData = IPhone[];