时间戳

首页 > 解决方案 > 在反应中循环数组

reactjs - 在反应中循环数组

问题描述

我无法遍历此 api 并显示数据。您可以在这里查看示例 api https://api.coingecko.com/api/v3/search/trending。如果您能帮助我，我将不胜感激

界面

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[];
   
}

反应代码

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

  return {response.coins?.map((p) => {
          return <div>{p.item.name}
</div>;
}

export default Home

示例 API

{
   "coins":[
      {
         "item":{
            "id":"superfarm",
            "name":"SuperFarm",
            "symbol":"SUPER",
            "market_cap_rank":235,
            "thumb":"https://assets.coingecko.com/coi1613975899",
            "large":"https://assets.coingecko.com/coins
            "score":0
         }
      }
   ],
}

标签： reactjstypescript

解决方案

问题是从 axios 你得到一个 ResponseObjects 数组，然后你将它设置为“趋势”字段。但是然后在您的 return 语句中，您将其视为单个对象...

也许你需要做类似的事情

return {trending[0].coins?.map((p) => {
          return <div>{p.item.name}
</div>;

这样你就抓住了第一个项目。

此外，我不确定这是否是一个错误，但您的 return 语句引用了“then”子句内部的“response”，而它可能应该引用本地状态“trending”。

同样在您的 axios 调用中，您期望一个数组 ResponseObject[] 并且在您的 useState 中您期望一个数组...但是在您的“示例 Api”中，它似乎是一个对象。因此，也许在 axios 调用和 useState 中都将 ResponseObject[] 更改为 ResponseObject ，最后您的代码最终将如下所示：

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

  return {trending?.coins?.map((p) => {
          return <div>{p.item.name}
</div>;
}

推荐阅读