javascript - 使用 React Native 从服务器进行奇怪的响应解释

Question

我正在使用“React Native”来创建一个用作当前存在的 Web 服务器的应用程序(出于隐私原因不能透露)。我正在尝试创建一个登录页面，一切都已设置为使用 in build“fetch(url)”命令启动请求。

type Props = {};
export default class App extends Component<Props> {

  constructor (Props) {
    super(Props);
    this.state={
    username:'',
    password:'',
    Response:''
  }
  // bindings to state
  this.Login = this.Login.bind(this); // you need this to be able to access state from login
  this.HttpRequest = this.HttpRequest.bind(this);
  this.ValidateResponse = this.ValidateResponse.bind(this);
}

Login(){
  requestURL = sURL + "usr=" + this.state.username + "&" + "pwd=" + this.state.password;

  var response = this.HttpRequest(requestURL);
  this.setState({Response: "Response: " + JSON.stringify(response)});
}

HttpRequest(url){
  return fetch(url)
  .catch((error) => {
  this.setState({Response: "Error: " + error});
  });
}

ValidateResponse(response){
  this.setState({Response: "Validating Login...\n" + response});
}

render() {
  return (
    // The Container for the Activity
    <View style={styles.container}>

      {/* The Image of The MiBase Logo */}
      <View style={styles.MiBaseLogo}>
        <Image resizeMode="contain" style={styles.MiBaseLogoImage} source={require("./mibaselogo.png")}/>
      </View>

      {/* The Text Input for the username and password*/}
      <TextInput style={styles.Username} placeholder="Username" placeholderTextColor="rgb(200,200,200)"
        onChangeText={(username) => {this.setState({username})}}/>
      <TextInput style={styles.Password} placeholder="Password" placeholderTextColor="rgb(200,200,200)"
        onChangeText={(password) => {this.setState({password})}} secureTextEntry={true}/>

      {/* The Button to Command the Login Functionality */}
      <TouchableOpacity style={styles.LoginButton} onPress={this.Login}>
        <Text style={styles.LoginButtonText}>Login</Text>
      </TouchableOpacity>

      {/* The Text To Output Success or Report Failure */}
      <View style={styles.TextOutput}>
        <Text style={styles.TextOutputText}>{this.state.Response}</Text>
      </View>

    </View>
  );
}

这是我的页面/事件的代码。我是新手，所以我不确定这是否通常是如何完成的，但是为了发送请求，全局变量“sURL”(分配的服务器名称)附加了变量(usr＆pwd)到它并使用 fetch 发送出去。当我对响应进行 json.stringify 并将其返回到我的调试测试时，响应是这样的 Image of Page

使用 Http Get 请求(通过 chrome)时的响应是 {“成员”:{“用户名”:“”，“密码”:“”，“ key ”:“b54d42c276a76283013589a7c285eebf”，“状态”:“否”}}

谁能解释一下或找出我做错了什么？

Answer 1

不确定为什么会出现该错误，我昨天刚刚使用 https://github.com/gcanti/tcomb-form-native 制作了一个表格而且非常简单，可以立即使用。

我的印象是您的问题出在您的提取上，您可以访问 api 后端吗？您是否也在 url 中发送密码？？？

您期待什么样的回应？创建登录页面时，您实际上只需要知道服务器是否接受登录

编辑:

这是我的登录提取示例，将登录详细信息作为 POST 请求发布到我的 API:

onLoginPress = () => {
        const value = this._form.getValue(); 

            if(value != null){
                 this.setState({
                    fetching: true
                 })

                var AdminLoginBindingModel = {
                    AdminID: 0,
                    AdminName: value.Username,
                    AdminPassword: value.Password,
                    }

                fetch(YOUR API END POINT',
                {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },     
                    body: JSON.stringify(AdminLoginBindingModel)
                    })       
                    .then((res) => res.json())
                    .then((json) => {
                        console.log(json);
                        this.setState({
                            isLoggedIn: true
                        })

                    })
                    .catch((error) => {
                        this.setState({
                            error: 'Something went wrong!' + error,
                            isLoggedIn: false,
                            fetching: false
                        })
                    })
            }                         
      }

我就是这样做的，但是您将登录详细信息作为 url 的一部分发送给您，从您的代码来看它看起来不错。

编辑 2:

constructor(props){super(props);
this.state = {
API_Response_Status: false,
JSON_Response: {}
  }
}

然后:

fetch(YOUR API END POINT',
            {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },     
                body: JSON.stringify(AdminLoginBindingModel)
                })       
                .then((res) => res.json())
                .then((json) => {
                    console.log(json);

                    this.setState({
                        API_Response_Status: true,
                        JSON_Response: json
                    })
                    console.log(this.state.JSON_Response);
                    console.log(this.state.API_Response_Status);

                })
                .catch((error) => {
                    this.setState({
                        error: 'Something went wrong!' + error,
                        API_Response_Status: false,
                        fetching: false
                    })
                })
        }