React：我應該如何填充HTML？

我一直在關注 React 的各種教程。我使用 API 來獲取我的資料。我認為我所做的方式效率不高，但我查看的代碼不起作用。

我完全不知道應該如何將我從 API 獲得的資訊獲取到組件中。我對解決方案的最后一次嘗試被注釋掉了。

我確信我的代碼可能存在一些根本性的錯誤，因此任何有助于修復我的代碼或包含 React 更多方面的東西都將不勝感激。

應用程式.js

import { useEffect } from "react";

function App() {
  const getAllAgents = async () => {
    const res = await fetch('https://valorant-api.com/v1/agents/')
    const results = await res.json()

    const agentNames = [], agentImages = [], agentRoles = []
    const agentDetails = []

    for (let i = 0; i < Object.keys(results["data"]).length; i  ) {
      if (results["data"][i]["developerName"] == 'Hunter_NPE') {
        continue
      }
      else {
        agentNames.push(results["data"][i]["displayName"])
        agentImages.push(results["data"][i]["displayIcon"])
        agentRoles.push(results["data"][i]["role"]["displayName"])
      }
    }

    for (let i = 0; i < agentNames.length; i  ) {
      agentDetails[i] = [agentNames[i], [agentImages[i], agentRoles[i]]]
    }
    agentDetails.sort();
    //console.log(agentDetails)
  }

  useEffect(() => {
    getAllAgents()
  }, [])

  return (
    <div className="app-container">
      <h3>Valorant</h3>
      <div id="agent_container" className="agent-container">
      {/*getAllAgents.map((agentDetails) =>
        <agentCard 
          img={agentDetails[1][0]}
          name={agentDetails[0]}
          role={agentDetails[1][1]}
      />)*/}
      </div>
    </div>
  );
}

export default App;

代理卡.js

import React from 'react'

const agentCard = ({role, name, img}) => {
    return (
        <div card-container>
            <div className="img-container">
                <img src={img} alt={name} />
            </div>
            <div className="info">
                <h3 className="name">{name}</h3>
                <small class="role"><span>{role}</span></small>
            </div>
        </div>
    )
}

export default agentCard

uj5u.com熱心網友回復：

還有幾件事要做/更正，

1. 您需要將 API 回應設定為組件狀態。你應該useState為此使用鉤子。

2. React 組件名稱應該以大寫的第一個字母開頭。您也可以在匯入時更正它。最好遵循一些約定。

import AgentCard from "./agentCard";

嘗試如下。

import { useEffect, useState } from "react";
import AgentCard from "./agentCard";

function App() {
  const [agentDetails, setAgentDetails] = useState([]);

  const getAllAgents = async () => {
    const res = await fetch("https://valorant-api.com/v1/agents/");
    const results = await res.json();

    const agentNames = [],
      agentImages = [],
      agentRoles = [];
    const agentDetails = [];

    for (let i = 0; i < Object.keys(results["data"]).length; i  ) {
      if (results["data"][i]["developerName"] == "Hunter_NPE") {
        continue;
      } else {
        agentNames.push(results["data"][i]["displayName"]);
        agentImages.push(results["data"][i]["displayIcon"]);
        agentRoles.push(results["data"][i]["role"]["displayName"]);
      }
    }

    for (let i = 0; i < agentNames.length; i  ) {
      agentDetails[i] = [agentNames[i], [agentImages[i], agentRoles[i]]];
    }
    agentDetails.sort();
    setAgentDetails(agentDetails);
  };

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

  return (
    <div className="app-container">
      <h3>Valorant</h3>
      <div id="agent_container" className="agent-container">
        {agentDetails.map((agentDetails) => (
          <AgentCard
            img={agentDetails[1][0]}
            name={agentDetails[0]}
            role={agentDetails[1][1]}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

代碼沙箱

標籤：

上一篇：EOFError-使用Zoho郵件時到達檔案末尾

下一篇：如何在基于函式的組件中添加沒有fetch呼叫的onload