React：我应该如何填充 HTML？

Question

我一直在关注 React 的各种教程。我使用 API 来获取我的数据。我认为我做的方式效率不高，但我查看的代码不起作用。

我完全不知道应该如何将我从 API 获得的信息获取到组件中。我最后一次尝试的解决方案被注释掉了。

我确信我的代码可能存在一些根本错误，因此任何有助于修复我的代码或包含更多 React 方面的内容将不胜感激。

App.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;

agentCard.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 className="role"><span>{role}</span></small>
            </div>
        </div>
    )
}

export default agentCard;

Answer 1

还有一些事情要做/纠正，

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;

Code Sandbox