Javascript 反应本机渲染错误缺少分号

我对React Native还不熟悉，在加载fetch函数时，我正试图显示ActivityIndicator。我正在研究如何实现它，我认为我需要使用Render（）{}函数，但它向我展示了分号的大小和错误

这是我目前的代码：

import React，{coponent}来自'React'；
从“react native”导入{样式表、文本、视图、按钮}；
导出默认函数App（）{
此.state={
孤岛加载：是的，
}
const[nombre，setNombre]=React.useState（“”）；
const fetchDatos=async（）=>{
返回获取（'http://localhost:8000/api/consulta“，{method:'POST'，headers:newheaders（{'Accept'：'application/json'，
“内容类型”：“应用程序/json”，
})，正文：JSON.stringify({
共同参与者：“1520”，
与“135927”相反，
})})。然后（响应=>{
返回response.json（）；
})
.然后（responseJson=>{
if（responseJson.Participante['@attributes'].Cod==1）{
开关（responseJson.Participante.Status.Codigos['@attributes'].Codigo）{
案例“400”：
警报（responseJson.Participante.Status.Codigos['@attributes'].错误）；
打破
案例“300”：
警报（responseJson.Participante.Status.Codigos['@attributes'].错误）；
打破
违约：
console.log（'Error interno'）；
打破
}
}否则{
this.setState（{isLoading:false}）
setNombre（responseJson.Participante.InfoPartitipante['@attributes'].Nombre）；
}}).catch（函数（）{
警惕（“无可能的连接服务商”）；
});
} 
render（）{
const{isLoading}=this.state；
返回(
{nombre}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});您混淆了类基组件和函数组件

这是一个功能组件：

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"
    }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮}；
导出默认函数App（）{
常量[loading，setLoading]=React.useState（true）；
const[nombre，setNombre]=React.useState（“”）；
const fetchDatos=async（）=>{
返回取回（“http://localhost:8000/api/consulta", {
方法：“张贴”，
标题：新标题（{Accept:“application/json”，“Content Type:“application/json”}），
正文：JSON.stringify({
codigoParticipante:“1520”，
对立面：“135927”
})
})
。然后（响应=>{
返回response.json（）；
})
.然后（responseJson=>{
if（responseJson.Participante[“@attributes”].Cod==1）{
开关（responseJson.Participante.Status.Codigos[“@attributes”].Codigo）{
案例“400”：
警报（responseJson.Participante.Status.Codigos[“@attributes”]错误）；
打破
案例“300”：
警报（responseJson.Participante.Status.Codigos[“@attributes”]错误）；
打破
违约：
控制台日志（“内部错误”）；
打破
}
}否则{
this.setState（{isLoading:false}）；
setNombre（responseJson.Participante.InfoPartitipante[“@attributes”].Nombre）；
}
})
.catch（函数（）{
警惕（“无可能的连接服务商”）；
});
};
返回(
{nombre}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
});

在功能组件中没有
render
方法，您必须使用
useState
定义状态，因此
此状态不起作用

而且，
组件
不正确。
您混淆了类基组件和函数组件

这是一个功能组件：

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"
    }
});

从“React”导入React；
从“react native”导入{样式表、文本、视图、按钮}；
导出默认函数App（）{
常量[loading，setLoading]=React.useState（true）；
const[nombre，setNombre]=React.useState（“”）；
const fetchDatos=async（）=>{
返回取回（“http://localhost:8000/api/consulta", {
方法：“张贴”，
标题：新标题（{Accept:“application/json”，“Content Type:“application/json”}），
正文：JSON.stringify({
codigoParticipante:“1520”，
对立面：“135927”
})
})
。然后（响应=>{
返回response.json（）；
})
.然后（responseJson=>{
if（responseJson.Participante[“@attributes”].Cod==1）{
开关（responseJson.Participante.Status.Codigos[“@attributes”].Codigo）{
案例“400”：
警报（responseJson.Participante.Status.Codigos[“@attributes”]错误）；
打破
案例“300”：
警报（responseJson.Participante.Status.Codigos[“@attributes”]错误）；
打破
违约：
控制台日志（“内部错误”）；
打破
}
}否则{
this.setState（{isLoading:false}）；
setNombre（responseJson.Participante.InfoPartitipante[“@attributes”].Nombre）；
}
})
.catch（函数（）{
警报（“无e