如何將我的常量組件與API請求結合起來？

我仍然是網路開發的新手，我遇到了一個絆腳石。我目前正在開發一個獲取 API 影像的專案，我想在我的代碼中附加指向它的鏈接，但它會成倍地增加陣列的數量，這就是問題所在。

這是它的快照-

import React, { useState, useEffect } from 'react';
import '../App.css';
import axios from 'axios';
import  sites  from './Constants';

const Leagues = () => {
  const [data, setData] = useState([]);

  useEffect(()=> {
    axios('https://api-football-standings.azharimm.site/leagues')

    .then(res => {
      console.log(res.data.data);
      setData(res.data.data);
    })
  }, [])

  return <div className='leagues-container'>
    {data.map((data)=> (
      sites.map(({ source })=> (
          <div key={data.id}>
            <a href={source} target='_blank' rel='noreferrer' className='leagues-div'>
              <img src={data.logos.light} />
            </a>
            <h1>{data.name}</h1>
          </div>
        ))))}
    </div>;
};
  

export default Leagues;

我還創建了一個常量組件，其中包含一個適合每個影像的鏈接陣列。

常數-

const sites = [
  {
    id: 0,
    title: 'Argentinian League',
    source: 'https://www.afa.com.ar/es/'
  },
  { 
    id: 1,
    title: 'Australian League',
    source: 'https://www.ultimatealeague.com/'
  },
  {    
    id: 2,
    title: 'Brazilian League',
    source: 'https://www.espn.com.au/football/league/_/name/bra.1'
  },
  {    
    id: 3,
    title: 'Chinese League',
    source: 'https://www.thecfa.cn/Eindex/index.html'
  },
  {  
    id: 4,
    title: 'Dutch League',
    source: 'https://eredivisie.eu/home/'
  },
  {    
    id: 5,
    title: 'English League',
    source: 'https://www.premierleague.com/'
  },
  {    
    id: 6,
    title: 'French League',
    source: 'https://www.ligue1.com/'
  },
  {    
    id: 7,
    title: 'German League',
    source: 'https://www.bundesliga.com/en/bundesliga'
  },
  {    
    id: 8,
    title: 'Indonesian League',
    source: 'https://www.espn.com.au/football/league/_/name/idn.1'
  },
  {    
    id: 9,
    title: 'Italian League',
    source: 'https://www.legaseriea.it/en'
  },
  {
    id: 10,
    title: 'Japanese League',
    source: 'https://www.jleague.co/'
  },
  {
    id: 11,
    title: 'Malaysian League',
    source: 'https://www.malaysianfootballleague.com/'
  },
  {
    id: 12,
    title: 'Mexican League',
    source: 'https://www.espn.com.au/football/schedule/_/league/mex.1'
  },
  {
    id: 13,
    title: 'Portuguese League',
    source: 'https://www.ligaportugal.pt/en/homepage/'
  },
  {
    id: 14,
    title: 'Russian League',
    source: 'https://eng.premierliga.ru/'
  },
  {
    id: 15,
    title: 'Singaporean League',
    source: 'https://www.spl.sg/'
  },
  {
    id: 16,
    title: 'Spanish League',
    source: 'https://www.laliga.com/en-GB'
  },
  {
    id: 17,
    title: 'Thai League',
    source: 'https://www.thaileague.co.th/131'
  },
  {
    id: 18,
    title: 'Turkish League',
    source: 'https://www.tff.org/Default.aspx?pageID=449'
  },
  {
    id: 19,
    title: 'Ugandan League',
    source: 'https://fufa.co.ug/uganda-premier-league/'
  },

]

export default sites

API 的陣列上有 20 個專案，我在常量組件上創建了 20 個鏈接，這些鏈接將鏈接到相應的專案。我附上了下面問題的快照。在該影像上，我將滑鼠懸停在與常量組件上的第二個鏈接相對應的第二個影像上。鏈接是正確的，但影像不正確。從滾動條可以看出，我錯誤地將影像乘以鏈接的影像。歡迎任何建議！

相乘影像的照片

uj5u.com熱心網友回復：

您正在執行兩次映射，這意味著對于在外回圈上回圈的每個元素都有另一個內部回圈。這就是資料重復的原因。

 const findSource =(index) => {
    const site = sites.find((el) => el.id === index)
    return site.source;
  }

  return (
    <div className='leagues-container'>
    {data.map((data,index)=> (
          <div key={data.id}>
            <a href={findSource(index)} target='_blank' rel='noreferrer' className='leagues-div'>
              <img src={data.logos.light} alt={data.name} />
            </a>
            <h1>{data.name}</h1>
          </div>
       ))}
    </div>
  );

在這里，我創建了一個從站點串列中查找鏈接的函式。根據您定義站點陣列的方式，只有當您的 API 回應和站點陣列的順序相同時，這才能正常作業。因此，我建議為站點陣列和 API 回應使用一個通用 ID。比如你可以有id: "arg.1"等等。

沙盒演示

標籤：javascript 数组 反应 api

上一篇：流行的免費api似乎不起作用

下一篇：如何在NodeAPI(Express)中執行延遲作業