내 후크 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

Alvaro

나는이 사람들을 어떻게 만들지 모르겠습니다 .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>;
})

my-hook-state-doesn % C2 % B4t-update-correctly 왜 수정

여기에 이미지 설명 입력

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

상태 후크가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 반응 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 div가 올바르게 쌓이지 않는 이유는 무엇입니까?

분류에서Dev

내 태그 도우미가 올바르게 해결되지 않는 이유는 무엇입니까?

분류에서Dev

상태가 올바르게 업데이트되지 않는 것 같습니다.

분류에서Dev

텍스트 커서 좌표가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

텍스트 커서 좌표가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

Acrobat에서 계산 합계가 올바르게 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 bash 스크립트가 올바르게 CD가 아닌 이유는 무엇입니까?

분류에서Dev

내 스프라이트가 올바르게 그려지지 않는 이유 (libgdx)는 무엇입니까?

분류에서Dev

xargs가 내 입력을 올바르게 구문 분석하지 않는 이유는 무엇입니까?

분류에서Dev

내 Arc 테마가 Ubuntu 18.04에서 올바르게 보이지 않는 이유는 무엇입니까?

분류에서Dev

폴더의 전체 크기가 올바르게 계산되지 않는 이유는 무엇입니까?

분류에서Dev

내 Python 코드가 부울을 올바르게 평가하지 않는 이유는 무엇입니까?

분류에서Dev

내 함수가 개체 속성을 올바르게 정렬하지 않는 이유는 무엇입니까?

분류에서Dev

내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?

분류에서Dev

내 TextBoxFor가 통화 값을 올바르게 표시하지 않는 이유는 무엇입니까?

분류에서Dev

Ajax가 모델을 올바르게 업데이트하지 않는 이유는 무엇입니까?

분류에서Dev

onChange 트리거 업데이트 후 내 페이지가 다시로드되는 이유는 무엇입니까?

분류에서Dev

threadpooltest가 올바르게 실행되지 않는 이유는 무엇입니까?

분류에서Dev

내 변수가 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 SeekBar가 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

내 SeekBar가 업데이트되지 않는 이유는 무엇입니까?

분류에서Dev

텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

분류에서Dev

텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

분류에서Dev

후크에서 반응에서 상태를 올바르게 업데이트하는 방법은 무엇입니까?

분류에서Dev

UseEffect 후크에서 상태를 설정 한 후에도 내 React 상태가 정의되지 않은 이유는 무엇입니까?

분류에서Dev

상태가 정의되지 않은 이유는 무엇입니까? [후크 / Redux]

분류에서Dev

후크를 사용하여 버튼 클릭 후 상태가 업데이트되지 않는 이유는 무엇입니까?

Related 관련 기사

  1. 1

    상태 후크가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  2. 2

    내 반응 상태가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  3. 3

    내 div가 올바르게 쌓이지 않는 이유는 무엇입니까?

  4. 4

    내 태그 도우미가 올바르게 해결되지 않는 이유는 무엇입니까?

  5. 5

    상태가 올바르게 업데이트되지 않는 것 같습니다.

  6. 6

    텍스트 커서 좌표가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  7. 7

    텍스트 커서 좌표가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  8. 8

    Acrobat에서 계산 합계가 올바르게 업데이트되지 않는 이유는 무엇입니까?

  9. 9

    내 bash 스크립트가 올바르게 CD가 아닌 이유는 무엇입니까?

  10. 10

    내 스프라이트가 올바르게 그려지지 않는 이유 (libgdx)는 무엇입니까?

  11. 11

    xargs가 내 입력을 올바르게 구문 분석하지 않는 이유는 무엇입니까?

  12. 12

    내 Arc 테마가 Ubuntu 18.04에서 올바르게 보이지 않는 이유는 무엇입니까?

  13. 13

    폴더의 전체 크기가 올바르게 계산되지 않는 이유는 무엇입니까?

  14. 14

    내 Python 코드가 부울을 올바르게 평가하지 않는 이유는 무엇입니까?

  15. 15

    내 함수가 개체 속성을 올바르게 정렬하지 않는 이유는 무엇입니까?

  16. 16

    내 코드가 동기화에서 올바르게 작동하지 않는 이유는 무엇입니까?

  17. 17

    내 TextBoxFor가 통화 값을 올바르게 표시하지 않는 이유는 무엇입니까?

  18. 18

    Ajax가 모델을 올바르게 업데이트하지 않는 이유는 무엇입니까?

  19. 19

    onChange 트리거 업데이트 후 내 페이지가 다시로드되는 이유는 무엇입니까?

  20. 20

    threadpooltest가 올바르게 실행되지 않는 이유는 무엇입니까?

  21. 21

    내 변수가 업데이트되지 않는 이유는 무엇입니까?

  22. 22

    내 SeekBar가 업데이트되지 않는 이유는 무엇입니까?

  23. 23

    내 SeekBar가 업데이트되지 않는 이유는 무엇입니까?

  24. 24

    텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

  25. 25

    텍스트 요소의 내용이 올바르게 정당화되지 않는 이유는 무엇입니까?

  26. 26

    후크에서 반응에서 상태를 올바르게 업데이트하는 방법은 무엇입니까?

  27. 27

    UseEffect 후크에서 상태를 설정 한 후에도 내 React 상태가 정의되지 않은 이유는 무엇입니까?

  28. 28

    상태가 정의되지 않은 이유는 무엇입니까? [후크 / Redux]

  29. 29

    후크를 사용하여 버튼 클릭 후 상태가 업데이트되지 않는 이유는 무엇입니까?

뜨겁다태그

보관