reactjs – React Native Fetch仅在第二次点击时起作用

2023年11月18日 227次阅读

我在React Native上做了应用程序.问题是下一个：

OnPress我试图向我的服务器请求一些元素并记录答案.

当我第一次单击按钮时 – 我的日志没有显示任何内容,但在第二次单击时我在控制台中看到响应.

import React from 'react'

import { View, Text, StyleSheet, TextInput ,  TouchableNativeFeedback      , AsyncStorage } from 'react-native'
import {connect} from 'react-redux'
import * as pageActions from '../action/index'
import { bindActionCreators } from 'redux'

import api from '../api'


class Login extends React.Component {

constructor(props){
super(props);
this.state = {
  loginAttempt : false,
  email : 'admin@mail.ru',
  password : 'password',
  token : ''
}
}

 loginAttempt() {
  let email = this.state.email;
  let password = this.state.password;
  api.login(email,password)
 }
  render() {
    return (
      <View style={styles.container}>
       <TextInput
        placeholder="Email"
      style={{height: 50, borderColor: 'gray', borderWidth: 1}}
      onChangeText={(value) => this.setState({email : value})}
    />
    <TextInput
      placeholder="Password"
      style={{height: 50, borderColor: 'gray', borderWidth: 1}}
      onChangeText={(value) => this.setState({password : value})}
    />
    <TouchableNativeFeedback
      style={!this.state.loginAttempt ? {'opacity' : 1} : {'opacity' : 0}}
      onPress={() => this.loginAttempt()}>
      <View>
        <Text>Try login</Text>
      </View>
    </TouchableNativeFeedback>
  </View>
   )
   }
  }

var styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
   }
  }
 )

我的获取功能

login(email,password, callback) {

 const API_HEADERS = {
  'Accept' : `application/json`,
  'Content-Type' : `application/json`
  };


let user = {};
user.email = email;
user.password = password;


fetch(`http://myIp:3000/auth/login`, {
  method : 'post',
  headers : API_HEADERS,
  body : JSON.stringify(user)
})
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      alert(`Wrong data`)
    }
  })
  .then((responseData) => {
    console.log(responseData)
  })

}

还想添加我使用Genymotion作为android emul.另一个奇怪的事情是,当我第一次按下我的按钮 – 没有任何反应,但是当我按下Reload JS时,在组件将被卸载之前,我在控制台中看到我的responceData

最佳答案 当承诺解决时,您应该更新状态.

.then((responseData) => {
     this.setState({
       token: responseData.token
     });
   })

使用catch方法：

.then().catch(e => console.log("error: ", e))

此外,您的警报功能在哪里？ react-native有Alert模块.

Alert.alert('any message text');

文章约fetch

这是article使用反应原生的fetch

点赞