나는이 사람들을 어떻게 만들지 모르겠습니다 .API 배열로 상태를 업데이트 할 수 없으며 useEffect에 넣으면 오류가 발생하여 데이터를 보내지 않습니다 .stackoverflow를 사용하는 것이 처음입니다.
import React, { useEffect, useState } from "react";
import getTeam from "../Helpers/getTeam";
const selectTeams = [
"Barcelona",
"Real Madrid",
"Juventus",
"Milan",
"Liverpool",
"Arsenal",
];
const Select = () => {
const [team, setTeam] = useState(null);
const [loading, setLoading] = useState(null);
const handleOption = async (e) => {
setLoading(true);
let teamsJson = await getTeam(e.target.value);
let arr = [];
Object.keys(teamsJson).map((teamjs, i) => {
return arr.push(teamsJson[teamjs]);
});
console.log(arr);
console.log(team);
setTeam(arr);
setLoading(false);
};
return (
<div
style={{ background: "skyblue", textAlign: "center", padding: "20px" }}
>
<h1>Equipos Disponibles</h1>
<div>
<select onChange={handleOption}>
<option>Elige tu equipo</option>
{selectTeams.map((selectTeam, i) => {
return <option key={i}>{selectTeam}</option>;
})}
</select>
</div>
{loading ? <h1>suave</h1> : (
team !== null ? (
team.map((newTeam, i) => {
return (
<div>
the items are here
</div>
)
})
) : null
)}
</div>
);
};
export default Select;
내 API 파일을 내려 놓았다
const getTeam = async (teamName) => {
const url = `https://www.thesportsdb.com/api/v1/json/1/searchteams.php?t=${teamName}`;
const res = await fetch(url);
const team = await res.json();
return team;
};
export default getTeam;
내 api 호출의 응답으로 내 const 팀을 업데이트하고 싶지만 업데이트되지 않습니다. 무엇을 해야할지 모르겠습니다. 도와주세요.
teamsJson
값은 어떤 배열의 단일 키와 값 목적
{ teams: [...] }
따라서 값을 다른 배열로 푸시 할 때 중첩 배열로 상태를 업데이트합니다.
let arr = [];
Object.keys(teamsJson).map((teamjs, i) => {
return arr.push(teamsJson[teamjs]);
});
team
상태 배열 을 매핑하려는 방법에 따라 원시 내부 배열을 원한다고 가정합니다 teamJson
.
const { teams } = await getTeam(e.target.value);
setTeam(teams);
그런 다음 매핑 할 때 필요한 속성에 액세스 할 수 있습니다.
team.map((newTeam, i) => {
return <div key={i}>{newTeam.idTeam}</div>;
})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다