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