如何将消费的 API 响应发送到另一个组件？答案

【问题标题】：How to send consumed API response to another component?如何将消费的 API 响应发送到另一个组件？
【发布时间】：2021-03-21 02:35:55
【问题描述】：

我正在使用 Weatherbit API 来制作 web-aap。我在 App.js 文件中使用 API 响应，然后将其保存到一个状态，然后将该状态传递给另一个组件。但是该组件正在获取该状态的初始值（空对象）而不是 API 响应。看下面的代码。

function App() {

  const [details, setDetails] = useState({ "value": "First" })
  const [url, setUrl] = useState("")

  const fetchWeather = async () => {
    const { data } = await Axios.get(`https://api.weatherbit.io/v2.0/current?city=Modasa&key=24d74085081e4ec7b4971bec0a1f2ef3`)

    // const details = data.data[0]
    console.log(data)
    setDetails(data)
  }

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

  return (
    <div className="App">
      <SectionOne data={details} />
    </div>
  );

}

export default App;

** 我获得初始值的第二个组件（空对象）**

const SectionOne = ({ data }) => {

  return (
    <div>

      <div className="sectionOne">
        <span className="region">{`${data.data[0].city_name}`}</span>
        <span className="country">{data.data[0].country_code}</span>
      </div>

      <div className="sectionTwo">
        <span className="icon"><img source={data.data[0].weather?.icon} /></span>
        <span className="temp">{data.data[0].temp}</span>
        <span className="unit">°C</span>
        <span className="feels">Feels Like {data.data[0].app_temp} °C | {data.data[0].weather?.description}</span>
      </div>

      <div className="sectionThree">
        <div><span>Wind</span>{data.data[0].wind_spd} KM</div>
        <div><span>Wind Dir.</span>{data.data[0].wind_cdir}</div>
        <div><span>Humidity</span>{data.data[0].current?.humidity} %</div>
        <div><span>Pressure</span>{data.data[0].pres} MB</div>
        <div><span>UV Index</span>{data.data[0].uv}</div>
        <div><span>Visibility</span>{data.data[0].vis} KM</div>
      </div>

    </div>
  )
}

export default SectionOne

【问题讨论】：

标签： reactjs api axios use-effect weather-api

【解决方案1】：

您将初始状态设置为 { "value": "First" } 但 SectionOne 组件需要其他格式的数据，请尝试访问不存在的属性 data.data[0].city_name。因此你会得到错误。

你应该设置初始状态为空

const [details, setDetails] = useState(null)

并在渲染中进行空检查。这是最佳做法。

return (
    <div className="App">
      { details && <SectionOne data={details} /> }
    </div>
  );

【讨论】：

感谢兄弟，它成功了。你能解释一下吗？