reactjs-将API调用数据设置为状态,但在分配类型时遇到问题
发布时间:2022-07-10 23:57:18 172
相关标签: # node.js
Earth.tsx
组件,然后尝试将数据渲染到浏览器。
保存到状态的API数据:
{
date: '2018-01-03T16:50:46.890000',
id: 'LANDSAT/LC08/C01/T1_SR/LC08_025039_20180103',
resource: {…},
service_version: 'v5000',
url: 'https://earthengine.googleapis.com/v1alpha/project…bccd48-3aa76fabdd69b028540a8edb2800e72b:getPixels'
}
问题是,当我尝试渲染数据时,会出现错误
对象可能未定义
关于如何解决这个问题,有什么建议吗?我有一种感觉,这与我所属的州有关。
Earth.tsx
import { useState, useEffect,FC } from "react"
import axios, { AxiosResponse } from "axios"
const Earth = ():JSX.Element => {
interface IEarth {
date:string,
id:string,
resource:{
dataset:string,
planet:string
}
service_version: string,
url: string
}
// type PhotoPayload = IEarth[]
const [data,setData] = useState()
const url = 'https://api.nasa.gov/planetary/earth/assets?lon=-95.33&lat=29.78&date=2018-01-01&&dim=0.10&api_key=DEMO_KEY'
const getData = ():void => {
axios.get(url)
.then((res: AxiosResponse) => {
setData(res.data)
})
}
useEffect(() => {
getData()
},[])
console.log('data', data)
return(
{data.url}
)
}
export default Earth
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报