如何解决如何在反应中将 openweather 数据从组件渲染到子组件?
我正在尝试从 GetWeather.js 组件的开放天气 api 加载数据,并将结果加载到我的 page.js 组件中。
当我使用 fetch 加载数据并尝试在组件内呈现 DOM 元素时,我收到错误 Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children,use an array instead.
这就是那个组件的样子。
import React,{ useState,useEffect } from 'react'
const api = {
key: '...',base: 'https://api.openweathermap.org/data/2.5/',}
const GetLocationWeather = ({ lat,lon }) => {
const [weather,setWeather] = useState({})
useEffect(() => {
fetch(
`${api.base}weather?lat=${lat}&lon=${lon}&units=imperial&APPID=${api.key}`
)
.then((res) => res.json())
.then((result) => {
setWeather(result.main.temp)
})
},[lat,lon])
return <div>{weather}</div>
}
export default GetLocationWeather
我想在另一个显示天气数据的文件中使用这个组件:
import GetLocationWeather from '../components/OpenWeather'
<GetLocationWeather lat={latitude} lon={longitude} />
问题是,当我想在 GetLocationWeather.js 的 return 语句中呈现任何内容时,我收到 Objects are not valid as a React child
的错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。