从另一个JSON（React.js）获得回复后，我该如何检索JSON

Question

希望这个问题标题不会太模糊或混乱，但是我会在这里解释：

基本上，我试图在React.js之旅中了解更多有关API的信息。该项目是根据您输入搜索框的任何位置（我正在根据加拿大的邮政代码进行的）获得天气预报信息（我正在根据加拿大的邮政代码进行）。我是专门用于此的Axios，并且遇到了一个小问题。

我希望该程序从一个API链接中获取响应，然后从该响应中获取特定数据以将其插入另一个API链接。然后，它最终将从新链接中获得响应。希望这也不会混淆。我尝试了不同的事情，但仍然没有运气，但是我将把我最近尝试的东西放在下面。

这是我到目前为止所做的：

import React, { useState } from 'react'
import axios from 'axios'

function App() {
  
  // UseStates to change the variables
  const [data, setData] = useState({})
  const [postalcode, setPostalCode] = useState('')
  const [latitude, setLatitude] = useState(0)
  const [longitude, setLongitude] = useState(0)

  // API Links
  const geocodingURL = `http://api.openweathermap.org/geo/1.0/zip?zip=${postalcode},CA&limit=1&appid=7fe57d3d219cd9512845e116e4c353c5`
  const weatherURL = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=7fe57d3d219cd9512845e116e4c353c5`
  
  // Arrow Functions to retrieve the responses from the API Links
  const searchPostalCode = (event) => {
    if (event.key === 'Enter') {
      axios.get(geocodingURL).then((response) => {
        setData(response.data)
        console.log(response.data)
      })

      axios.get(weatherURL).then((response) => {
        setLatitude(data.lat)
        setLongitude(data.lon)
        setData(response.data)
        console.log(response.data)
      })

      setPostalCode("")
    }
  }

  return (
    <div className="app">
      <div className="search">
        <input
          value={postalcode}
          onChange={event => setPostalCode(event.target.value) && setLatitude(data.lat) && setLongitude(data.lon)}
          onKeyPress={searchPostalCode}
          searchWeather
          placeholder='Enter Postal Code'
          type="text"/>
      </div>

      <!-- There is more code here, but I don't think it's necessary for this question since it's just header tags -->
    </div>
  );
}

export default App;

我正在使用的天气API没有直接位置 - ＆gt;天气API。我必须使用两个，所以我必须做位置 - ＆gt;经度＆amp;悠久，然后经度＆amp; lattitude-＆gt;天气。

如果我说的是令人困惑的，请告诉我。如果需要，我可以尝试更多地解释它。

另外，由于我对整个React.js和API的事情有些新，如果您建议您有任何建议，请告诉我。我很想知道整个旅程中的任何有用信息。

谢谢！

Answer 1

通过将第二个Axios请求拖动在第一个请求的然后内，因此您可以使用第一个请求的响应。

或者，您可以使用async和等待语法。

更多资源。

https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/statement/statement/ashync_function

Answer 2

  axios.get(geocodingURL).then((geoCodingRes) => {
    // next call
    axios.get(weatherURL).then((weatherREs) => {
        // set your react states here
    })
  })