reactjs - 如何在React Native Redux组件中添加错误处理？

Question

我想为带有redux错误的组件添加一个句柄处理，如何在该组件中添加正常的警报工作，但是我想在组件中呈现该错误以避免错误发生时应用程序的崩溃？在这种情况下，我该如何实现呢？

import React, { useState } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";
import { Text, View, TextInput, Alert, TouchableOpacity } from "react-native";
const Forgetpassword = (props) => {
  const { error, reset, success, isFetching } = props;
  const [data, setData] = React.useState({
    email: "",
  });
  const textInputChange = (val) => {
    setData({
      ...data,
      email: val,
    });
  };
  const handleOnSubmit = (event) => {
    reset(data);
    Alert.alert("Success", "Forgot password link successfully sent to mail");
  };
  return (
    <View style={styles.container}>
      <View style={styles.inputsContainer}>
        <View style={styles.input}>
          <TextInput
            style={styles.inputText}
            name="email"
            placeholder="Email"
            onChangeText={(val) => textInputChange(val)}
            textContentType="emailAddress"
          />
        </View>
        <View style={styles.inputBtn}>
          <TouchableOpacity onPress={handleOnSubmit}>
            <Text style={styles.btnText}>Reset</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};
const mapStateToProps = (state) => {
  const { success, error, isFetching } = state.password;
  return {
    success,
    error,
    isFetching,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    reset: (person) => {
      dispatch(actions.password.reset(person));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Forgetpassword);

Answer 1

您需要一个错误边界组件，该组件可以捕获子代上的所有异常并登录到服务器/通知后备屏幕。并将您的应用程序包装在ErrorBoundary组件中，以减少崩溃的应用程序。

class ErrorBoundary extends React.Component {
     state = { hasError: false }

     static getDerivedStateFromError (error) {
        return { hasError: true }
     }

     componentDidCatch (error, info) {
        logErrorToService(error, info.componentStack)
     }

     render () {
        return this.state.hasError
        ? <ErrorMessageComponent />
        : this.props.children
     }
  }