我建议你使用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

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