React不會加載從物件陣列匯入的影像

我所做的目的是嘗試將團隊徽標與他們的賠率相關聯，因為如果我想要來自 api 的徽標，那將需要花錢。

正如我們從以下代碼中看到的那樣，我匯入了所有影像并將其匯出為一個物件陣列，每個物件都有其特定的徽標

import western_united from "./western-united.png";
import brisbane from "./brisbane.png";
import western_sydney from "./western-sydney.gif";
import newcastle_jets from "./newcastle-jets.gif";
import central_coast from "./central-coast.gif";
import melbourne_city from "./melbourne-city.png";
import wellington from "./wellington.gif";
import perth from "./perth.gif";
import adelaide from "./adelaide.gif";
import mcarthur from "./mcarthur.png";
import melbourne_victory from "./melbourne-victory.gif";
import sydney from "./perth.gif";

const images = [
    {
        name: "Western United FC",
        image: western_united,
    },
    {
        name: "Brisbane Roar",
        image: brisbane,
    },
    {
        name: "Western Sydney Wanderers",
        image: western_sydney,
    },
    {
        name: "Newcastle Jets FC",
        image: newcastle_jets,
    },
    {
        name: "Central Coast Mariners",
        image: central_coast,
    },
    {
        name: "Melbourne City",
        image: melbourne_city,
    },
    {
        name: "Wellington Pheonix FC",
        image: wellington,
    },
    {
        name: "Perth Glory",
        image: perth,
    },
    {
        name: "Adelaide United",
        image: adelaide,
    },
    {
        name: "Macarthur FC",
        image: mcarthur,
    },
    {
        name: "Melbourne Victory FC",
        image: melbourne_victory,
    },
    {
        name: "Sydney FC",
        image: sydney,
    },
];

export default images;

現在這是我的邏輯，將影像匯入組件，找出與每個影像相關聯的團隊并將其提供給 img html 標記的“src”

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
    let foundHome;
    let foundAway;

    function returnImage() {
        foundHome = images.find((element) => element.name === games.home_team);
        foundHome = foundHome.image;
        console.log(foundHome);

        foundAway = images.find((element) => element.name === games.away_team);
        foundAway = foundAway.image;
        console.log(foundAway);
    }

    useEffect(() => {
        returnImage();
    }, []);

    return (
        <div className="games__container">
            <div className="betting__container">
                <div className="team_a">
                    <figure className="image__container">
                        <img src={foundHome} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.home_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[0].price}</button>
                </div>
                <div className="draw__container">
                    <p className="draw">Draw</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[2].price}</button>
                </div>
                <div className="team_b">
                    <figure className="image__container">
                        <img src={foundAway} alt="" className="image" />
                    </figure>
                    <p className="team--name">{games.away_team}</p>
                    <button className="btn">{games.bookmakers[0].markets[0].outcomes[1].price}</button>
                </div>
            </div>
        </div>
    );
}

export default Games;

當我控制臺記錄輸出時，它會為每個影像“/static/media/adelaide.5775692ae1b78491dcca.gif”回傳一個類似這樣的字串。但它不會渲染任何影像并且是空白的，我在這里做錯了什么？

uj5u.com熱心網友回復：

useEffect問題是在 React 完成渲染后傳遞給運行的回呼。因此，當img被渲染時， foundHome&foundAway變數都是undefined，因此src屬性設定為undefined.

您實際上不需要效果掛鉤，因為沒有副作用，您可以在渲染期間直接foundHome計算。foundAway

import React, { useEffect } from "react";
import images from "../images/index";

function Games({ games }) {
  let foundHome = images.find(
    (element) => element.name === games.home_team
  ).image;

  let foundAway = images.find(
    (element) => element.name === games.away_team
  ).image;

  return (
    <div className="games__container">
      <div className="betting__container">
        <div className="team_a">
          <figure className="image__container">
            <img src={foundHome} alt="" className="image" />
          </figure>
          <p className="team--name">{games.home_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[0].price}
          </button>
        </div>
        <div className="draw__container">
          <p className="draw">Draw</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[2].price}
          </button>
        </div>
        <div className="team_b">
          <figure className="image__container">
            <img src={foundAway} alt="" className="image" />
          </figure>
          <p className="team--name">{games.away_team}</p>
          <button className="btn">
            {games.bookmakers[0].markets[0].outcomes[1].price}
          </button>
        </div>
      </div>
    </div>
  );
}

export default Games;

標籤：javascript html css 反应 网络

上一篇：Angular-將InnerHTML與TS檔案中的翻譯系結

下一篇：如何在React中的兩個元素之間渲染？