我一直在关注有关 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;
最佳答案
还有一些事情需要做/纠正,
您需要将 API 响应设置为组件状态。您应该为此使用
useState
Hook 。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;
关于javascript - react : How should I populate the HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70706591/