Javascript 代码块在api调用得到响应之前运行

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

---

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

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调用中的数据，则无需将其设置为任何状态对象，您只需在第二个api调用中直接使用即可。

const[session，setSession]=useState（“”）；
const[champions，setChampions]=useState（[]）；
useffect（（）=>{
试一试{
const session=等待axios.get(`http://api.paladins.com/paladinsapi.svc/createsessionJson/${devId}/${generateSignature（'createsession'）}/${moment.utc（）.format（'YYYYMMDDHHmmss'）}`）；
设置会话（会话.会话id）；
const champions=等待axios.get(`http://api.paladins.com/paladinsapi.svc/getchampionsJson/${devId}/${generateSignature（'getchampions'）}/${session.session_id}/${moment.utc（）.format（'YYYYMMDDHHmmss'）}/1`）；
赛特冠军（冠军）；
}
捕捉（错误）{
控制台日志（err）；
}
}, [])

useffect（可能）或axious.get（肯定）是异步函数。谷歌在JavaScript中的意思是什么。一般来说，您需要第一次调用它，然后在回调中进行第二次调用，类似于axious.get（oneCall）.success（（）=>{axiouse.get（…等等）。这会给我一个错误：“success不是函数”。使用此选项，我仍然会遇到相同的问题。它仍然会在第二次axios调用中返回空字符串，导致找不到调用的url。使用此选项，我仍然会遇到相同的问题。它仍然会在第二次axios调用中返回空字符串，导致找不到调用的url。您如何设置会话I将sessionid直接设置为第一个api请求的第二个api请求，而不是将sessionid设置为状态。因此，不将response.data.session\u id设置为状态，而应该将session.data.session\u id直接设置为第二个api调用。这样做，我就不再得到404 not found错误，但是，它似乎仍然没有更新冠军数组。使用：setchamps（myChamps.data）；它似乎在接收数据之前设置了setchamps数组