Arrays 为什么我的钩子状态没有´;更新不正确吗?

Arrays 为什么我的钩子状态没有´;更新不正确吗?,arrays,reactjs,react-hooks,state,Arrays,Reactjs,React Hooks,State,我不知道如何使这家伙,我不能更新我的api数组状态,如果我把它在使用效果我有一个错误,因为我没有发送任何数据,请帮助我是我第一次使用stackoverflow import React, { useEffect, useState } from "react"; import getTeam from "../Helpers/getTeam"; const selectTeams = [ "Ba

我不知道如何使这家伙,我不能更新我的api数组状态,如果我把它在使用效果我有一个错误,因为我没有发送任何数据,请帮助我是我第一次使用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团队,但它没有更新,我不知道该怎么办,请帮助我,我刚刚测试了它&它似乎工作得很好

唯一的两个问题似乎是:

  • 您不能在任何地方使用
    team
    (除了
    console.log
    语句)
  • 当您
    console.log(团队)时
    常量
    team
    将(仍然)第一次成为
    null
    (因为它仍然保持初始状态)
  • 以下是我在
    中随机挑选一个团队后看到的情况:


    teamsJson值是一个具有单个键和某个数组值的对象

    { teams: [...] }
    
    因此,当您将值推入另一个数组时,您正在使用嵌套数组更新状态

    let arr = [];
    Object.keys(teamsJson).map((teamjs, i) => {
      return arr.push(teamsJson[teamjs]);
    });
    
    根据您希望映射
    团队
    状态数组的方式,我假设您只需要
    团队JSON
    中的原始内部数组

    const { teams } = await getTeam(e.target.value);
    setTeam(teams);
    
    然后,在映射时,可以访问所需的任何属性

    team.map((newTeam, i) => {
      return <div key={i}>{newTeam.idTeam}</div>;
    })
    
    team.map((newTeam,i)=>{
    返回{newTeam.idTeam};
    })
    


    您基本上是在尝试将
    对象.值(teamsJson)
    存储到
    团队
    状态吗?您如何验证/确认
    team
    没有更新?使用控制台日志,我尝试映射团队状态以显示api的信息,使用条件和所有这些,但我不能,我不知道在更新状态之前,您可以在日志
    team
    中做些什么。除此之外,您在代码段中没有对它进行其他引用。您试图将
    团队
    状态映射到哪里?你能提供一个完整的代码示例吗?return(Equipos Disponibles Elige tu equipo{selectTeams.map((selectTeam,i)=>{return{selectTeam};})}{loading?suave:(team!==null?(team.map((newTeam,i)=>{return return(项目在这里)})):null)});它已经更新了我想映射状态以显示api信息,但是我不能这样做,我使用条件来做,但是没有work@Alvaro嘿然后,请分享显示您在输出状态方面尝试的代码。代码可能有一些问题,但我们无法在没有看到它的情况下提供帮助。return(Equipos Disponibles Elige tu equipo{selectTeams.map((selectTeam,i)=>{return{selectTeam};})}{loading?suave:(team!==null?(team.map((newTeam,i)=>{return(项目在此处)}):null)});
    team.map((newTeam, i) => {
      return <div key={i}>{newTeam.idTeam}</div>;
    })