Javascript 如何在React中定义正确的接口和数据循环？

我对打字本有点陌生。这里我有一个简单的API，我想迭代并显示数据。您可以转到API链接并查看原始数据。如果能得到一些帮助，我将非常感激

接口：

export interface ITrending {
  coins: IItem[]
}

export interface IItem {
  item: {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb?: string;
    large?: string
  } 
}

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ITrending } from '../interfaces'
const TRENDING = 'https://api.coingecko.com/api/v3/search/trending'
const Home = () => {
  const [trending, setTrending] = useState<ITrending[]>([])
  useEffect(() => {
    axios.get<ITrending[]>(TRENDING).then((response) => {
      setTrending(response.data)
      console.log(response.data)
    })
  }, [])

  return <div></div>
}

export default Home

反应代码：

export interface ITrending {
  coins: IItem[]
}

export interface IItem {
  item: {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb?: string;
    large?: string
  } 
}

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ITrending } from '../interfaces'
const TRENDING = 'https://api.coingecko.com/api/v3/search/trending'
const Home = () => {
  const [trending, setTrending] = useState<ITrending[]>([])
  useEffect(() => {
    axios.get<ITrending[]>(TRENDING).then((response) => {
      setTrending(response.data)
      console.log(response.data)
    })
  }, [])

  return <div></div>
}

export default Home

---

由于硬币位于

数据的内部。硬币

，因此您需要采用以下方式：

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { ITrending } from '../interfaces'
const TRENDING = 'https://api.coingecko.com/api/v3/search/trending'
const Home = () => {
  const [trending, setTrending] = useState<ITrending[]>([])
  useEffect(() => {
    axios.get<ITrending[]>(TRENDING).then((response) => {
      setTrending(response.data.coins)
      console.log(response.data)
    })
  }, [])

  return <div>{trending.map(t => (<div key={t.item.id}>{t.item.name}</div>)}</div>
}

export default Home

import React，{useffect，useState}来自“React”
从“axios”导入axios
从“../interfaces”导入{ITrending}
常数趋势法https://api.coingecko.com/api/v3/search/trending'
常量Home=（）=>{
常量[trending，setTrending]=useState（[]）
useffect（（）=>{
获取（趋势）。然后（（响应）=>{
设置趋势（响应、数据、硬币）
console.log（response.data）
})
}, [])
返回{trending.map（t=>（{t.item.name}）}
}
导出默认主页

通过TypeScript中的数据数组与使用JavaScript一样简单。使用

.map

。一个简单的exmaple

趋势分析.map（（项）=>//此处的逻辑/）

在

=>

之后可以添加

{//此处的逻辑/}

但是你需要一个

返回值

在它里面。仍然看不到数据显示在console@AjeetShah是获取良好的bcs，我看不到任何数据显示在consoleTry

axios.get（TRENDING）中。然后（（response）=>{setTrending（response.data）；console.log（response）}）。catch（err=>{console.log（err）；}）

。您真的解决了CORS问题吗？与其进行趋势分析，还不如对以下问题进行分析，是吗？我得到的项目在趋势分析属性中不存在