javascript - 如何使用 redux 在 react native 上显示错误消息

Question

我在我的 react native 应用程序中使用 redux。我的问题是如何将终端中出现的错误消息显示给渲染。

我尝试使用 {this.props.error} 并且什么都不会出现

行动

import * as actionTypes from "./Types";

export const setErrors = errors => ({
  type: actionTypes.SET_ERRORS,
  payload: errors
});

export const resetError = () => {
  return async dispatch => {
    dispatch({
      type: actionTypes.RESET_ERROR,
      payload: []
    });
  };
};

减速机

import * as actionTypes from "../actions/Types";
import { SET_ERRORS, RESET_ERROR } from "../actions/Types";

const initialState = {
  errors: [],
  reset: ""
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_ERRORS:
      console.log("from reducer");
      console.log("errrrro", action.payload);

      return {
        ...state,
        errors: Object.keys(action.payload).map(
          key => `${key}: ${action.payload[key]}`
        )
      };
    case RESET_ERROR:
      return {
        ...state,
        errors: action.payload
      };

    default:
      return state;
  }
};

export default reducer;

这是我的 index.js

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actionCreators from "../../store/actions";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  Image
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";

class Login extends Component {
  state = {
    username: "",
    password: ""
  };


  resetState = () => {
    this.setState({ password: null });
  };
  errors = () => {
    this.props.errors;
  };

  Login = () => {
    this.props.login(this.state, this.props.navigation);
    this.resetState();
  };

  render() {
    return (
      <LinearGradient
        colors={["#002d44", "#001724"]}
        style={{ flex: 1 }}
        start={[0, 0]}
        end={[1, 0]}
      >
        <View style={styles.container}>
          <Text>{error}</Text>
          <View style={styles.inputContainer}>
            <Image
              style={styles.inputIcon}
              source={{
                uri:
                  "https://img.icons8.com/ios/80/000000/identification-documents-filled.png"
              }}
            />

            <TextInput
              style={styles.inputs}
              autoCapitalize="none"
              placeholder="اسم المستخدم"
              onChangeText={username => this.setState({ username })}
              value={this.state.username}
            />
          </View>

          <View style={styles.inputContainer}>
            <Image
              style={styles.inputIcon}
              source={{
                uri: "https://img.icons8.com/ios/80/000000/lock-2-filled.png"
              }}
            />
            <TextInput
              style={styles.inputs}
              placeholder="كلمة المرور"
              secureTextEntry={true}
              onChangeText={password => this.setState({ password })}
              value={this.state.password}
            />
          </View>

          <TouchableHighlight
            style={[styles.buttonContainer, styles.loginButton]}
            onPress={this.Login}
          >
            <Text style={{ color: "#fff", fontSize: 15 }}>دخول</Text>
          </TouchableHighlight>

          <TouchableHighlight
            style={{}}
            onPress={() => this.props.navigation.replace("Signup")}
          >
            <Text style={{ color: "#00F7EA", fontSize: 15 }}>تسجيل</Text>
          </TouchableHighlight>
        </View>
      </LinearGradient>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  inputContainer: {
    borderBottomColor: "#F5FCFF",
    backgroundColor: "#FFFFFF",
    borderRadius: 30,
    borderBottomWidth: 1,
    width: 250,
    height: 45,
    marginBottom: 20,
    flexDirection: "row",
    alignItems: "center"
  },
  inputs: {
    height: 45,
    marginLeft: 16,
    fontSize: 15,
    textAlign: "center",
    borderBottomColor: "#FFFFFF",
    flex: 1
  },
  inputIcon: {
    width: 30,
    height: 30,
    marginLeft: 15,
    justifyContent: "center"
  },
  buttonContainer: {
    height: 45,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 20,
    width: 250,
    borderRadius: 30,
    borderWidth: 0.8,
    borderColor: "#d6d7da"
  },
  loginButton: {
    backgroundColor: "transparent"
  },
  buttonDisabled: {
    backgroundColor: "#e7e7e7"
  },
  loginText: {
    color: "white"
  }
});
const mapStateToProps = state => ({
  user: state.authReducer.user,
  loading: state.devicesReducer.loading,
  errors: state.errorReducer.errors
});
const mapDispatchToProps = dispatch => ({
  login: (userData, navigation) =>
    dispatch(actionCreators.login(userData, navigation)),
  checkForExpiredToken: navigation =>
    dispatch(actionCreators.checkForExpiredToken(navigation))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);

终端上显示的错误信息

from reducer errrrro Object { "password": Array ["This field may not be blank.", ], "username": Array ["This field may not be blank.", ], } from reducer errrrro [Error: Request failed状态码 400]