Блок кода запускается до того, как вызов API получает ответ

Question

Второй блок useEffect запускается до того, как первый получил какие-либо данные обратно. Это заставляет второй блок возвращать ошибку и пустой массив.

Я пытался использовать async / await, так как это решало подобные проблемы для меня в прошлом. Однако здесь это, похоже, не дает эффекта.

    const [session, setSession] = useState("");
    const [champions, setChampions] = useState([]);

    useEffect(() => {
        axios.get(`http://api.paladins.com/paladinsapi.svc/createsessionJson/${devId}/${generateSignature('createsession')}/${moment.utc().format('YYYYMMDDHHmmss')}`).then((response) => {
            setSession(response.data.session_id);
            console.log(session);
        }).catch((error) => {
            console.log(error);
        })
    }, [])

    useEffect(() => {
        axios.get(`http://api.paladins.com/paladinsapi.svc/getchampionsJson/${devId}/${generateSignature('getchampions')}/${session}/${moment.utc().format('YYYYMMDDHHmmss')}/1`).then((response) => {
            setChampions(response.data);
            console.log(champions);
        }).catch((error) => {
            console.log(error);
        })
    }, []);

Он должен возвращать массив объектов чемпионам, но, поскольку он не получает идентификатор сеанса, вызов API не является правильнымчемпионы по сохранению адресов в виде пустого массива.

Answer 1

    const [session, setSession] = useState("");
    const [champions, setChampions] = useState([]);

    useEffect(() => {
  try{
    const session = await axios.get(`http://api.paladins.com/paladinsapi.svc/createsessionJson/${devId}/${generateSignature('createsession')}/${moment.utc().format('YYYYMMDDHHmmss')}`);

    setSession(session.session_id);

    const champions = await axios.get(`http://api.paladins.com/paladinsapi.svc/getchampionsJson/${devId}/${generateSignature('getchampions')}/${session.session_id}/${moment.utc().format('YYYYMMDDHHmmss')}/1`);

    setChampions(champions );
     }
catch(err){
    console.log(err);
     }
}, [])

Answer 2

useEffect - это асинхронная функция, поэтому вам нужно просто переместить оба вызова в одну функцию useEffect, а затем синхронно вызывать ваши API. Я бы переместил это в отдельную функцию и использовал бы async / await для синхронного запуска вашего вызова API. Затем вызовите эту функцию в вашей функции useEffect следующим образом:

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

const getData = async () => {
  try{
    const session = await axios.get(`your first call here`);
    const champions = await axios.get(`your second call here`);

    setSession(session.yourData);
    setChampions(champions.yourData);
  }catch(err){
    console.log(err);
  }
} 

Если у вас есть данные из первого вызова API, которые использует второй, тогда вам не нужно устанавливать это для любого объекта состояния, который вы можете простоиспользуйте его непосредственно во втором вызове API.