Javascript 如何在fetch-request-React-Native中使用响应

我在react native world和（JS）是新手。 我想将电话号码和密码发送到服务器登录。我可以发送数据和接收响应，但我不知道应该如何处理响应。我有一个名为“响应识别器”的函数。但它不起作用。甚至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>
        );
    }
}

import React，{Component}来自'React'；
进口{
平台，
样式表，
文本，
看法
文本输入，按钮
}从“反应本机”；
导出默认类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.\u onLogInPressed=this.\u onLogInPressed.bind（this）；
this.\u response\u recognizer=this.\u response\u recognizer.bind（this）；
此.state={
电话号码：''，
密码：“”，
数据：{}
};
}
_响应识别器（数据：字符串）{
}
_onLogInPressed=（）=>{
风险值数据={
“电话号码”：此.state.phone\u号码，
“密码”：this.state.password
}
取回（“http://192.168.1.12:5000/login", {
方法：“张贴”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（数据）
}).然后（功能（响应）{
返回response.json（）；
}).then（功能（数据）{
console.log（数据）
此.\u响应\u识别器（数据）
}).catch（（错误）=>{
console.log（“错误”+错误）；
});
};
render（）{
返回(
电话号码：
this.setState（{phone_number}）
maxLengt={11}
值={this.state.phone_number}
/>
密码：
this.setState（{password}）}
值={this.state.password}/>
);
}
}

两件事

您的

\u响应\u识别器

函数正在请求

数据：字符串

，但您正在返回一个json

对象

：

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

将其更改为

data:object

其次，在

中使用函数声明（
function（）{}
）。如果不直接绑定
此
，您将失去
类
函数的作用域。将它们更改为箭头函数（
（）=>{}
）以解决范围问题：

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

您也可以选择删除其中一个
。然后
操作：

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

✌ 两件事

您的
\u响应\u识别器
函数正在请求
数据：字符串
，但您正在返回一个json
对象
：

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

将其更改为
data:object

其次，在
中使用函数声明（
function（）{}
）。如果不直接绑定
此
，您将失去
类
函数的作用域。将它们更改为箭头函数（
（）=>{}
）以解决范围问题：

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

您也可以选择删除其中一个
。然后
操作：

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

✌ 检查这个

我希望这段代码对您有所帮助

    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


    }

导出默认类LoginForm扩展组件{
状态={
数据：[]，
}
_onLogInPressed=（）=>{
取（'http://192.168.1.12:5000/login',{
方法：'POST'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
“电话号码”：此.state.phone\u号码，
“密码”：this.state.password
})
})
.then（（response）=>response.json（））
。然后（（res）=>{
如果（res.success==true）{
警报（res.response）；
设datadata=res.data；
this.setState（{data:datadata}）
}否则{
警报（res.response）；
}
})
.完成（）；
};
////渲染功能
////兰德函数
}
检查此项

我希望这段代码对您有所帮助

    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


    }

导出默认类LoginForm扩展组件{
状态={
数据：[]，
}
_onLogInPressed=（）=>{
取（'http://192.168.1.12:5000/login',{
方法：'POST'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
“电话号码”：此.state.phone\u号码，
“密码”：this.state.password
})
})
.then（（response）=>response.json（））
。然后（（res）=>{
如果（res.success==true）{
警报（res.response）；
设datadata=res.data；
this.setState（{data:datadata}）
}否则{
警报（res.response）；
}
})
.完成（）；
};
////渲染功能
////兰德函数
}
您能简要解释一下这个问题的答案吗？这个答案有助于处理来自服务器的json响应。在这篇文章中，我设置了服务器响应，并根据条件使用了类中的任何位置。您能简要解释一下这是如何回答这个问题的吗？这个答案有助于处理来自服务器的json响应。在本文中，我设置state server response并根据