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则使用了该数据，则无需将其设置为任何状态对象，只需在第二个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);
     }
}, [])

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

2 个答案: