在无效的钩子调用中显示有关JS美眉抛出的错误提交表单

时间:2020-10-25 23:38:18

标签: react-native

也许我错了,但是如果出错,我想显示一个表格。我希望将表单作为组件,但即使在APp.js中,它也会失败。

当错误是致命的时,我想显示一个简单的表单供用户输入数据。但是现在,这个钩子已经失败了。完成下面我想做的事情的正确方法是什么?

ErrorForm.js:

const ErrorForm = (props) => {
  const [name, setName] = useState("")

    return (
      <View>
        <TextInput 
          onChangeText={text => setName(text)}
          value={name}
          placeholder="enter here"
        />
      </View>
    );
}

export default ErrorForm;

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import React, {useState} from 'react';
import {  AppRegistry } from 'react-native';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import {
  setJSExceptionHandler,
  setNativeExceptionHandler
} from 'react-native-exception-handler';
import ErrorForm from './ErrorForm';
import { name as appName } from './app.json';


const errorHandler = (e, isFatal) => {
  if (isFatal) {
    return ErrorForm();
  } else {
    console.log(e);
  }
};

setJSExceptionHandler(errorHandler, true);

setNativeExceptionHandler((errorString) => {
  // do the 
  console.log('native error. do nothing for now');
});

const App = () => {

  return (
    <>

    <AppNavigator
        ref={(navigatorRef) => {
        NavigationService.setTopLevelNavigator(navigatorRef);
        }}
    />

    </>
  );
};

AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));

export default App;

0 个答案:

没有答案