[英]React Native Render error missing semicolon
我是 React Native 的新手,当我的 fetch function 正在加载时,我试图显示一个 ActivityIndicator。 我正在寻找如何实现它,我想我需要使用 Render(){} function 但它显示我和分号错误
到目前为止,这是我的代码:
import React, {coponent} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { this.state = { isLoading: true, } const [nombre,setNombre]= React.useState(''); const fetchDatos = async () => { return fetch('http://localhost:8000/api/consulta', {method: 'POST', headers: new Headers({'Accept': 'application/json', 'Content-Type': 'application/json', }), body: JSON.stringify({ codigoParticipante: '1520', contrato: '135927', })}).then(response => { return response.json(); }).then(responseJson => { if(responseJson.Participante['@attributes'].Cod == 1){ switch (responseJson.Participante.Status.Codigos['@attributes'].Codigo) { case '400': alert(responseJson.Participante.Status.Codigos['@attributes'].Error); break; case '300': alert(responseJson.Participante.Status.Codigos['@attributes'].Error); break; default: console.log('Error interno'); break; } }else{ this.setState({ isLoading: false }) setNombre(responseJson.Participante.InfoParticipante['@attributes'].Nombre); }}).catch(function() { alert("No es posible conectar con el servidor."); }); } render(){ const { isLoading} = this.state; return ( <View> <Button title='press me' onPress={fetchDatos} /> <Text>{nombre}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
有人知道我做错了什么吗? 我会很感激的!
您混淆了 class 基本组件和功能组件。
这是功能组件:
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";
export default function App() {
const [loading, setLoading] = React.useState(true);
const [nombre, setNombre] = React.useState("");
const fetchDatos = async () => {
return fetch("http://localhost:8000/api/consulta", {
method: "POST",
headers: new Headers({ Accept: "application/json", "Content-Type": "application/json" }),
body: JSON.stringify({
codigoParticipante: "1520",
contrato: "135927"
})
})
.then(response => {
return response.json();
})
.then(responseJson => {
if (responseJson.Participante["@attributes"].Cod == 1) {
switch (responseJson.Participante.Status.Codigos["@attributes"].Codigo) {
case "400":
alert(responseJson.Participante.Status.Codigos["@attributes"].Error);
break;
case "300":
alert(responseJson.Participante.Status.Codigos["@attributes"].Error);
break;
default:
console.log("Error interno");
break;
}
} else {
this.setState({ isLoading: false });
setNombre(responseJson.Participante.InfoParticipante["@attributes"].Nombre);
}
})
.catch(function() {
alert("No es posible conectar con el servidor.");
});
};
return (
<View>
<Button title="press me" onPress={fetchDatos} />
<Text>{nombre}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
在功能组件中没有render
方法,您必须使用 useState 定义useState
所以this.state
不起作用。
而且coponent
也不正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.