Javascript 删除typescript中的数组

我似乎无法理解循环数组/对象。我经常被困在里面。比如这里，我无法迭代api中的数据，我得到的

趋势分析不是一个函数

错误。谁能帮我解决这个问题，并给我一些好的方向，让我更好地循环

接口

export interface Item {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb: string;
    large: string;
    score: number;
}

export interface Coin {
    item: Item;
}

export interface ResponseObject{
    coins: Coin[];
   
}

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

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

export default Home

代码

export interface Item {
    id: string;
    name: string;
    symbol: string;
    market_cap_rank: number;
    thumb: string;
    large: string;
    score: number;
}

export interface Coin {
    item: Item;
}

export interface ResponseObject{
    coins: Coin[];
   
}

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

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

export default Home

---

问题与循环无关

您正在使用非数组的内容调用

setTrending

。这就是为什么您会得到

trending.map不是一个函数

您的API不是直接返回一个数组，而是一个带有两个键的对象，每个键持有一个数组

[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
]

在您的情况下，您必须调用
setTrending（response.data.coins）

编辑：您还应该修复您的
响应对象
用法：

const[trending，setTrending]=useState（[]）；
useffect（（）=>{
axios
.获取（趋势）
。然后（（响应）=>{
设置趋势（响应、数据、硬币）；
})
.catch（err=>console.log（err））；
},[]);
问题与循环无关

您正在使用非数组的内容调用
setTrending
。这就是为什么您会得到
trending.map不是一个函数

您的API不是直接返回一个数组，而是一个带有两个键的对象，每个键持有一个数组

[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
]

在您的情况下，您必须调用
setTrending（response.data.coins）

编辑：您还应该修复您的
响应对象
用法：

const[trending，setTrending]=useState（[]）；
useffect（（）=>{
axios
.获取（趋势）
。然后（（响应）=>{
设置趋势（响应、数据、硬币）；
})
.catch（err=>console.log（err））；
},[]);
我猜您可能已将对象设置为趋势，而不是数组<代码>响应。数据
应返回与API相似的对象

// response.data should return this object.
{
   "coins":[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
   ],
   "exchanges":[]
}

您应该将
response.data.coins
设置为趋势，它将返回一个数组

[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
]

我猜您可能已将对象设置为趋势，而不是数组<代码>响应。数据

应返回与API相似的对象

// response.data should return this object.
{
   "coins":[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
   ],
   "exchanges":[]
}

您应该将

response.data.coins

设置为趋势，它将返回一个数组

[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coins/images/14040/thumb/6YPdWn6.png?1613975899",
            "large":"https://assets.coingecko.com/coins/images/14040/large/6YPdWn6.png?1613975899",
            "score":0
         }
      },
      {...}
]

---

您是否应该将

response.data.coins

传递给setState？您是否应该将

response.data.coins

传递给setState？我得到的属性“coins”在类型响应上不存在Object@Tequila请参阅编辑。我得到的属性“coins”在类型响应上不存在Object@Tequila请参见编辑。我将获得财产“硬币”类型响应对象上不存在。请在这里记录（响应）并共享。给你，抱歉我不在这里@Tequila我为你制作了一个沙箱：

响应。数据属于类型
响应对象
（如你在
axios.get
中指定的）<代码>响应.数据.硬币

是

硬币[]

（硬币数组）。我写了

setTrending（response.data.coins）在API成功。这意味着我正在将
response.data.coins
（类型
Coin[]
）设置为状态，即
趋势
。因此，我需要告诉
useState
，我将与您一起设置
Coin[]
数据类型。这就是为什么，我写了
useState（[]）。我得到的属性“coins”在类型响应对象上不存在。请您
控制台。记录（响应）
并在此处共享？给您，很抱歉我不在这里@Tequila我为您制作了一个沙箱：
响应。数据属于类型
响应对象
（如您在
axios.get
中指定的）<代码>响应.数据.硬币
是
硬币[]
（硬币数组）。我写了
setTrending（response.data.coins）在API成功。这意味着我正在将
response.data.coins
（类型
Coin[]
）设置为状态，即
趋势
。因此，我需要告诉
useState
，我将与您一起设置
Coin[]
数据类型。这就是为什么，我写了
useState（[]）。