[英]Making GET request within JSX.element function react native
I'm currently working on an expo and react-native application and I'm attempting to get some JSON with a latitude and longitude and displaying it as a map marker.
我知道以下内容有很多错误,但我很难找到任何用于创建 GET 请求和修改 JSX.element function 内部信息的文档。 除此之外,我也不确定如何每隔几分钟重复获取一次以不断更新此组件 state
如果这是基本的,我很抱歉,我对本机反应非常陌生,而且这些 JSX.element 函数不是类是令人困惑的。
export const Map = (): JSX.Element => (
state = {
responseData: []
}
fetch('https://apiURL', {method: 'GET'})
.then((response) => response.json())
.then((responseJson) => {
this.setState({responseJson})
console.log(responseJson)
})
.catch((error) => {
console.error(error);
});
<MapView
style={styles.map}
loadingEnabled={true}
region={{
latitude: 37.956290,
longitude: -91.779460,
latitudeDelta: 0.015,
longitudeDelta: 0.0121
}}
>
<MapView.Marker
coordinate={{
latitude: responseData.latitude,
longitude: responseData.longitude
}}
title={"Location"}
description={"Location of Location"}
/>
</MapView>
);
我在另一个 JSX.element 组件中使用这个 Map 组件:
export const MapScreen = (): JSX.Element => (
<SafeAreaView forceInset={{top: 'always'}}>
<Map/>
</SafeAreaView>
);
结果我不得不从 function 中删除 JSX.Element 语句,并从另一个 function 中获取数据。
const useFetch = url => {
const [data, setData] = useState(null);
async function fetchData(){
const response = await(fetch(url))
const json = await response.json();
setData(json);
}
useEffect(() => {
fetchData()
const interval=setInterval(() => {
fetchData()
}, 6000)
return()=>clearInterval(interval)
},[url]);
return data
};
export const Map = () => {
const data = useFetch('APIURL')
if(!data){
return <Text>Loading...</Text>
}
else {
return(
<MapView
style={styles.map}
loadingEnabled={true}
region={{
latitude: 37.956290,
longitude: -91.779460,
latitudeDelta: 0.015,
longitudeDelta: 0.0121
}}
>
<MapView.Marker
coordinate={{
latitude: data.latitude,
longitude: data.longitude
}}
title={"title"}
description={"desc"}
/>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.