Question

我是反应原生世界和（JS）的新手。我想将电话号码和密码发送到服务器进行登录。我可以发送数据并接收回复，但是，我不知道应该如何处理响应。我有一个名为 _response_recognizer 的函数。但它没有用。甚至 setStat 。所有教程仅说明如何连接到服务器以及如何从中获取数据。在我的登录表单中使用响应的最佳方法是什么。如果它的状态是200，我想导航另一个屏幕，否则我想要一个消息。

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput, Button
} from 'react-native';

export default class LoginForm extends Component<{}> {
    constructor(props) {
        super(props);
        this._onLogInPressed = this._onLogInPressed.bind(this);
        this._response_recognizer = this._response_recognizer.bind(this);
        this.state = {
            phone_number: '',
            password: '',
            data: {}
        };
    }
    _response_recognizer(data: string ){

    }

    _onLogInPressed = () => {

        var data = {
            'phone_number': this.state.phone_number,
            'password': this.state.password
        }


        fetch("http://192.168.1.12:5000/login", {
            method: "POST",
            headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            body:  JSON.stringify(data)
        }).then(function(response){
                return response.json();
            }).then(function(data){
                console.log(data)
            this._response_recognizer(data)
            }) .catch((error) => {
            console.log("Error" + error);
        });
    };

    render() {
        return (
            <View style={styles.flow}>
                <Text style={styles.text}>phone number:</Text>
                <TextInput keyboardType='numeric'
                           style={styles.input}
                           ref="phone_number"
                           onChangeText={(phone_number) => this.setState({phone_number})}
                           maxLengt={11}
                           value={this.state.phone_number}
                />
                <Text style={styles.text}>password:</Text>
                <TextInput style={styles.input} secureTextEntry={true} ref="password"
                           onChangeText={(password) => this.setState({password})}
                           value={this.state.password}/>
                <Button style={styles.button} onPress={this._onLogInPressed} title='login'/>
            </View>
        );
    }
}

Answer 1

两件事。

您的_response_recognizer函数正在请求data: string，但您要返回json object：

.then(function(response){
  return response.json();
}).then(function(data){
  console.log(data)
  this._response_recognizer(data)
})

将其更改为data: object。

其次，您在function(){}中使用函数声明（.then）。如果没有直接绑定this，您将失去Class函数的范围。将它们更改为箭头功能（() => {}）以修复范围问题：

.then((response) => response.json())
.then((data) => {
  console.log(data)
  this._response_recognizer(data)
})

您还可以选择删除其中一个.then操作：

.then((response) => {
  console.log(response.json())
  this._response_recognizer(response.json())
})

✌

Answer 2

检查一下......

我希望此代码可以帮助您

    export default class LoginForm extends Component<{}> {
    state = {
           data:[],

        }


     _onLogInPressed = () => {

          fetch('http://192.168.1.12:5000/login',{
                method:'POST',
                headers:{
                  'Accept':'application/json',
                  'Content-Type':'application/json',
                },
                body:JSON.stringify({
                 'phone_number': this.state.phone_number,
                'password': this.state.password
                })
              })
              .then((response) => response.json())
              .then((res) =>{
                if(res.success === true){
              alert(res.response);
         let datadata = res.data;
           this.setState({data:datadata})

                } else {
                  alert(res.response);
                }
              })
              .done();


            };

//// Render function
////Rander function


    }

如何在获取请求中使用响应React Native

2 个答案: