Javascript 无法从API获取访问对象的属性

我试图通过使用React，特别是使用hook，从数据库中获取某些数据。我的代码片段如下所示：

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

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>
)

useffect（（）=>{
天气预报
}, [])
const fetchWeather=async（）=>{
const dataOneDay=等待获取(
`https://api.openweathermap.org/data/2.5/weather?q=London，uk&appid=${API_KEY}&units=metric`
)
const singleDayData=await dataOneDay.json（）
设置singleDayData（singleDayData）
setIsLoading（错误）
console.log（singleDayData）
}
console.log（isLoading）
返回(
{isLoading==false&&}
{singleDayData.name}
)

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

TodayWeather.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>
)

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

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

从“React”导入React
const TodayWeather=（道具）=>{
返回(
今天在{props.name}
{console.log（“props”，props）}
)
}
导出默认的TodayWeather

{console.log（“props”，props）}

完整显示对象。但是，由于某些奇怪的原因，没有显示name属性

从API返回的对象如下所示

---

您将

singleDayData

作为道具传递给

TodayWeather

您需要通过props.singleDayData.main.temp或props对象参数中的destruct

singleDayData

来访问它

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

（）

consttodayweather=（{singleDayData}）=>(
今天在{singleDayData.name}
{singleDayData.main.temp}
);