Зависимый вызов API в функциональном компоненте React - PullRequest
Новая
       66

Зависимый вызов API в функциональном компоненте React

0 голосов
/ 29 апреля 2020

Итак, у меня есть функциональный компонент, который делает вызов API, чтобы получить объект "player" json. В этом извлеченном объекте "player" у меня есть вложенный объект "team" json, который содержит идентификатор, который мне нужно использовать в отдельном вызове API. Поскольку природа вызовов API асинхронна, как я могу гарантировать, что второй вызов API будет работать. 

const [player, setPlayer] = useState({});

async function fetchPlayer() {
    const res = await fetch(baseUrl + "/Players/" + player_id);
    res
        .json()
        .then(res => setPlayer(res));
}

useEffect(() => {
    fetchPlayer();
}, []);


const { 
    firstname = " ", 
    lastname = " ",
    team
} = player;

const {
    name = " ",
    team_id = 0
} = team || {};


// what I want to do. Team_id isn't set however...

const [thing, SetThing] = useState({});

async function fetchThing() {
        const res = await fetch(baseUrl + "/Thing/" + team_id);
        res
            .json()
            .then(res => setThing(res));
    }

В принципе, я уже могу получить объект команды json и его team_id, но я не уверен, как я могу реализовать еще один вызов API, который зависит от идентификатора команды.

Я попытался просто добавить еще одну асинхронную c функцию для размещения второго вызова API, но внутри этого вызова team_id еще не был установлен первым вызовом API. Любые идеи были бы великолепны, спасибо !!

1 Ответ

0 голосов
/ 29 апреля 2020

Обнаружено, что вы можете добавить значение ко второму аргументу, чтобы "слушать". Изменения этого значения вызовут тот useEffect, к которому он привязан. Например, я добавил это: 

const [thing, setThing] = useState({});

async function fetchThing() {
        const res = await fetch(baseUrl + "/Thing/" + team_id);
        res
            .json()
            .then(res => setThing(res));
    }

useEffect(() => {
    fetchThing();
}, [team_id]);

Так что теперь описанный выше useEffect сработает при изменении team_id. Поэтому гарантируется, что team_id установлен, а затем useEffect вызывает выборку с новым team_id, которого мы ждали от первого вызова API.

...