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

Question

如何在第二次提取中使用第一次提取的数据？ 我在第一次搜索时得到 undefined 然后没关系，我怎样才能在第一次搜索时得到它而不得到“undefined”？

  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

Answer 1

我相信 React JavaScript、Axios 向服务器发出调用然后继续，因此在收到服务器响应并运行回调之前调用 console.log function。 您要么需要等待操作员的响应，要么更好的解决方案是将您的第二个 API 调用置于回调 function 中。然后它将获得第二个 API 调用所需的数据。

如果您也在处理 API，您可能会考虑在一次 API 调用中从服务器获取所有内容。 这将涉及在服务器端工作，如果您有权访问 API 端点编码，我不知道您的帖子。 我希望这有助于或让您朝着正确的方向看。

Answer 2

我建议你使用类似useEffect的东西来处理在反应中获取数据。 不确定用于什么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 function。 如果event在任一请求中使用，您也想将其传递到依赖项数组中，这样您最终会得到

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

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

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