代码块在 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);

        })

    }, []);

它应该向冠军返回一个对象数组，但由于它没有收到会话 ID，因此 api 调用不是将冠军保持为空数组的正确地址。

Answer 1

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 调用中使用它。

Answer 2

    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);     }}, [])