时间戳

首页 > 解决方案 > React Native Render 错误缺少分号

javascript - React Native Render 错误缺少分号

问题描述

我是 React Native 的新手，我试图在我的 fetch 函数加载时显示一个 ActivityIndi​​cator。我正在寻找如何实现它，我认为我需要使用 Render(){} 函数，但它显示了我和分号错误

到目前为止，这是我的代码：

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

分号错误

有人知道我做错了什么吗？我会很感激的！

标签： javascriptreactjsreact-native

解决方案

您混淆了类基础组件和功能组件。

这是功能组件：

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因此this.state无法正常工作。

而且coponent也不正确。

推荐阅读