为什么我的钩子状态没有正确更新？答案

【问题标题】：Why my hook state doesn´t update correctly?为什么我的钩子状态没有正确更新？
【发布时间】：2021-02-12 11:06:59
【问题描述】：

我不知道这些人是怎么做到的，我无法用 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 团队，但它没有更新它，我不知道该怎么做，请帮助我

【问题讨论】：

您是在尝试将Object.values(teamsJson) 存储到team 状态吗？你如何验证/确认team 没有更新？
使用控制台日志，我正在尝试映射团队状态以显示 api 的信息，使用条件和所有这些，但我不能，我不知道可以是什么
您在更新状态之前登录team。除此之外，您在 sn-p 中没有对它进行其他引用。您要在哪里映射team 状态？能否提供完整的代码示例？
return (

Equipos Disponibles

{loading ?
suave
: ( team !== null ? ( team.map((newTeam, i) => { return (
项目在这里
) }) ) : null )}
);
已经更新了

标签： arrays reactjs react-hooks state

【解决方案1】：

我刚刚对其进行了测试，它似乎工作得很好。

似乎只有两个问题：

您不要在任何地方使用team（console.log 语句除外）。
在您console.log(team); 的那一刻，常量team 将（还）第一次成为null（因为它仍然保持初始状态）。

这是我在<select> 中随机选择一个团队后在React dev tools 中看到的内容：

【讨论】：

我想映射状态以显示 api 信息，但我做不到，我使用条件来做到这一点，但它不起作用
@Alvaro 嘿！然后，请分享显示您在输出状态方面尝试过的代码。代码可能有问题，但如果没有看到，我们将无法提供帮助。
return (

Equipos Disponibles

{loading ?
suave
: ( team !== null ? ( team.map((newTeam, i) => { return (
项目在这里
) }) ) : null )}
);

【解决方案2】：

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>;
})

【讨论】：