react项目中异常捕获处理

方法一：react16以后的版本增加异常捕获

componentDidCatch(error, info) {
    const isNewError = (error.toString() !== this.state.prevError.toString());// should only run once
    if (isNewError) {//判断两次错误不一致才再次执行，不然一直循环
      this.logErrorToMyService(error, info);
      this.setState({ prevError: error }); 
    }
  }

方法二：使用window.onerror全局捕获异常

  window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) {
     console.log('errorMessage: ' + errorMessage); // 异常信息
     console.log('scriptURI: ' + scriptURI); // 异常文件路径
     console.log('lineNo: ' + lineNo); // 异常行号
     console.log('columnNo: ' + columnNo); // 异常列号
     console.log('error: ' + error); // 异常堆栈信息
   };

方法三：使用try catch捕获

在每个方法内进行捕获，对所有的字段进行校验

let optionfloor = null;
try { 
    optionfloor = (
      floorList ? floorList.map((item) => {
        return <Option key={item.id} value={item.id}>{item.name}</Option>
      }) : null
    )
  } catch (e) {
    optionfloor = null;
    
  }

总结：项目内进行的异常判断少之又少，这是很危险的行为，每次接口出现的数据不符合预期都会出现空白页崩的现象。在未来的项目内，异常判断也要加入规范内，是项目很重要的一个组成部分，最起码的全局有异常捕获，其次每个具体的页面内判断字段是否存在，类型是否正确。