reactjs -在下次提取时使用提取的数据(axios)

disho6za  于 2022-11-23  发布在  iOS
关注(0)|答案(2)|浏览(214)

如何在第二次获取中使用第一次获取的数据?我在第一次搜索中未定义,然后就可以了,如何在第一次搜索中获取数据而不出现“未定义”?

const [summoner, setSummoner] = useState("");
  const [playerData, setPlayerData] = useState({});
  const [playerRank, setPlayerRank] = useState({});

  function searchPlayer(event) {
    axios.get("API1" + summoner + API_KEY).then(function (response) {
      setPlayerData(response.data);
    }).catch(function (error) {
      console.log(error);
    });

    console.log(playerData.id);

    axios.get("API2" + playerData.id + API_KEY).then(function (response) {
      setPlayerRank(response.data)
    }).catch(function (error) {
      console.log(error);
    });
  }

这是我的控制台:

log: undefined
log: id
0wi1tuuw

0wi1tuuw1#

我建议你使用useEffect来处理react中的数据获取。不知道event是做什么用的,但是看起来没有使用过,所以如果是这样的话,你可以做下面的事情:

const [summoner, setSummoner] = useState("");
  const [playerData, setPlayerData] = useState({});
  const [playerRank, setPlayerRank] = useState({});

  function getPlayerData() {
    axios.get("API1" + summoner + API_KEY).then(function (response) {
      setPlayerData(response.data);
    }).catch(function (error) {
      console.log(error);
    });
  }

  function getPlayerRank() {
    if(!playerData.id) return;
    axios.get("API2" + playerData.id + API_KEY).then(function (response) {
      setPlayerRank(response.data)
    }).catch(function (error) {
      console.log(error);
    });
  }

  useEffect(() => {
    getPlayerData()
  }, [])

  useEffect(() => {
    getPlayerRank()
  }, [playerData])

此设置将在playerData发生更改时触发getPlayerRank函数。

useEffect(() => {
    getPlayerData(event)
  }, [event])

  useEffect(() => {
    getPlayerRank()
  }, [playerData])

https://reactjs.org/docs/hooks-effect.html

zlhcx6iw

zlhcx6iw2#

我相信在React JavaScript中,Axios会向服务器发出一个调用,然后继续,因此console.log函数会在收到服务器响应和回调运行之前被调用。您要么需要等待响应,要么更好的解决方案是将第二个API调用放在回调函数中。然后,它将拥有第二个API调用所需的数据。
如果你也在开发API,你可能会考虑在一次API调用中从服务器获取所有东西。这将涉及到服务器端的工作,我从你的帖子中不知道你是否有访问API端点代码的权限。我希望这能帮助你找到正确的方向。

相关问题