提交表单时可能出现未处理的 Promise Rejection (id: 0)

Question

我似乎无法让表单工作，我收到错误 Possible Unhandled Promise Rejection (id: 0):

我正在为个人应用程序组合两个组件，它们都独立工作。一个是使用 MongoDB 的有效登录表单，另一个是使用其他人编写的屏幕的反应导航。

import strings from "./strings";
//import styles from "./styles";
import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  Platform,
  Alert,
  Image,
  ImageBackground
} from "react-native";
import { Button } from "react-native-elements";
import { NavigationScreenProps } from "react-navigation";

import LoginForm from "../../../components/LoginForm";
import axios from "axios";
import baseUrl from "../../../baseUrl";
axios.defaults.baseURL = baseUrl;

class LoginScreen extends Component<NavigationScreenProps> {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      email: "test@test.com",
      password: "secretPassword999",
      errorMessage: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSignIn = this.handleSignIn.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
  }

  handleChange(name, value) {
    this.setState({
      [name]: value
    });
  }

  async handleSignUp() {
    try {
      const { email, password } = this.state;
      await axios.post("/auth/signup", { email, password });
      this.handleSignIn();
    } catch (error) {
      this.setState({ errorMessage: error.response.data.message });
    }
  }

  async handleSignIn() {
    try {
      this.setState({ errorMessage: "" });
      const { email, password } = this.state;
      const result = await axios.post("/auth/login", { email, password });
      Alert.alert("", result.data.token);
      console.log(result);
      this.props.handleChange("token", result.data.token);
    } catch (error) {
      this.setState({ errorMessage: error.response.data.message });
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          source={require("../../../images/blur.jpg")}
          style={{
            flex: 1,
            position: "relative",
            resizeMode: "cover"
          }}
        >
          <Text style={styles.headerText}> Title</Text>
          <Text style={styles.headerSmall}>Service</Text>
          <LoginForm
            email={this.state.email}
            password={this.state.password}
            handleChange={this.handleChange}
            handleSignIn={this.handleSignIn}
            handleSignUp={this.handleSignUp}
          />
          <Text style={styles.errorMessage}>{this.state.errorMessage}</Text>
          {/*<Image
          source={require("../../../images/image.jpg")}
          style={styles.logo}
        />*/}
          <Button
            buttonStyle={{ backgroundColor: "transparent" }}
            title={strings.forgottenPassword}
            onPress={() =>
              this.props.navigation.navigate("PasswordResetScreen")
            }
          />
          <Button
            buttonStyle={{ backgroundColor: "transparent" }}
            title={strings.loginTitle}
            onPress={() => this.props.navigation.navigate("HomeScreen")}
          />
        </ImageBackground>
      </View>
    );
  }
}

export default LoginScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#6B52AE" 
  },
  errorMessage: {
    marginHorizontal: 22,
    fontSize: 18,
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center"
  },
  headerText: {
    fontSize: 44,
    textAlign: "center",
    marginBottom: 0, 
    color: "#FFF",
    fontFamily: Platform.OS === "android" ? "sans-serif-light" : undefined,
    marginTop: 30,
    fontWeight: "bold"
  },
  headerSmall: {
    fontSize: 24,
    textAlign: "center",
    marginBottom: 20, 
    color: "#FFF",
    fontFamily: Platform.OS === "android" ? "sans-serif-light" : undefined,
    marginTop: 0,
    fontWeight: "200"
  },
  logo: {
    height: 210,
    width: 360,
    marginLeft: 51,
    alignSelf: "center"
  }
});

Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'data' of undefined
    at LoginScreen.handleSignIn$ (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:87093:55)
    at tryCatch (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:21953:19)
    at Generator.invoke [as _invoke] (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:22128:24)
    at Generator.prototype.(anonymous function) [as next] (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:21996:23)
    at tryCatch (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:21953:19)
    at invoke (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:22029:22)
    at blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:22039:15
    at tryCallOne (blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:23231:14)
    at blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:23332:17
    at blob:http://localhost:8081/43e70a76-bca3-42a1-8a1f-44f14f5d8aeb:24654:21

Answer 1

this.setState({ errorMessage: error.response.data.message });

TypeError: 无法读取未定义的属性“数据”

error.response 似乎是undefined。

如果在 HTTP 之外发生诸如“未找到域”之类的错误，error.response 将是 undefined。 即使正确实施，有时也会出现此类错误，应在错误处理中予以考虑。

从提供的信息中无法清楚您的访问失败的原因。 console.log(err) 将为您提供更多信息。