Question

我在React Native上做app。问题是下一个：

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在一个控制台

Answer 1

当承诺解决时，你应该更新状态。

.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

Answer 2

另一个奇怪的事情是，当我第一次按下我的按钮时

这与焦点非常相关。尝试为keyboardShouldPersistTaps = true

设置TouchableNativeFeedback

React Native Fetch仅在第二次单击时起作用

2 个答案: