无法从 API fetch 访问对象的属性答案

【问题标题】：Not able to access property of object from API fetch无法从 API fetch 访问对象的属性
【发布时间】：2019-08-24 02:14:46
【问题描述】：

我正在尝试使用 React，特别是使用钩子从 Open Weather API 获取某些数据。我的一个sn-p代码如下：

App.js

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

const fetchWeather = async () => {

    const dataOneDay = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=${API_KEY}&units=metric`
    )
    const singleDayData = await dataOneDay.json()
    setSingleDayData(singleDayData)
    setIsLoading(false)
    console.log(singleDayData)
}

console.log(isLoading)

return (
    <div className={"weather-container"}>
        <img src={logo} alt={"Logo"} />
        {isLoading === false && <TodayWeather singleDayData={singleDayData} />}
        <h2>{singleDayData.name}</h2>
    </div>
)

在上面的代码中，singleDayData.name 属性按应有的方式显示（即“London” - 请参阅下面的屏幕截图了解完整的对象详细信息），

TodayWeather.js

我有另一个文件，我试图在其中显示数据，代码如下：

import React from "react"

const TodayWeather = (props) => {

    return (
        <div className={"today-weather"}>
            <h3>Today in {props.name}</h3>
            {console.log("props ", props)}
        </div>
    )
}

export default TodayWeather

{console.log("props ", props)} 完整显示对象。但是，由于某些奇怪的原因，name 属性没有被显示。

API 返回的对象如下。

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

您将singleDayData 作为prop 传递给TodayWeather，您需要通过props.singleDayData.main.temp 访问它或从props 对象参数中破坏singleDayData

此外，如果您只是从功能组件返回 JSX，您可以省略返回并将其包装在 ()

const TodayWeather = ({ singleDayData }) => (
  <div className="today-weather">
    <h3>Today in {singleDayData.name}</h3>
    <span>{singleDayData.main.temp}</span>
  </div>
);

【讨论】：