arrays - 为什么我的钩子状态没有正确更新?
问题描述
我不知道这些人是怎么做到的,我不能用 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>;
})
推荐阅读
- angular - 导出数组接口以避免“类型上不存在属性'push'的正确方法......”在Angular中
- java - Angular + Spring Boot跨域过滤器不起作用
- ios - 与会者出现 Swift 问题,无法获取姓名、电子邮件等...我不断收到错误消息
- amazon-web-services - 使用 SSM 的 CloudWatch 代理,其中实例未显示在托管实例中
- c# - 为什么此应用程序尝试连接到 SQL Server 而不是 SQLite?
- xamarin.forms - 如何在listview xamarin表单中实现复选框
- javascript - 使用带有 multiremote 的 WebDriverIO 在 chrome 和 firefox 上串行执行测试用例
- kotlin - 具有通量的 Thymeleaf StringTemplateResolver 不起作用
- java - Java程序未将对象保存到HashMap
- swift - NSTableRowView 在拖放操作期间未正确调用 DrawBackground