React Native Render 错误缺少分号

Question

I am new to React Native and I was trying to display an ActivityIndicator when my fetch function is loading. I was looking how to implement it and I think I need to use Render(){} function but it showing me and error of semicolon

this is my code so far:

 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', }, });

Do someone know what I am doing wrong? I will appreciate it a lot!

Answer 1

You mixed up class base component and functional component.

This is functional component:

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

In functional component there is no render method and you have to define state with useState so this.state not work.

and also coponent is not correct.