React应用导入Excel指定列展示：react-excel-renderer报错求助

问题修复方案 #

你遇到的报错是类组件state使用不规范导致的，以下是具体修复点和完整可运行代码：

• 未初始化组件state：类组件在使用this.state前必须在constructor中声明初始值，初始渲染时你没有定义state，直接访问this.state.rows会触发空指针报错
• 冗余的bind绑定：你已经用箭头函数定义了fileHandler，箭头函数会自动绑定当前组件实例，onChange中无需额外加.bind(this)
• 缺少渲染判断：用户未上传Excel时rows和cols为空，直接传给OutTable会触发组件内部参数校验报错，需要加条件渲染逻辑

import React, { Component } from "react";
import {OutTable, ExcelRenderer} from 'react-excel-renderer';

class ConvertToJson extends Component {
  // 新增constructor初始化state
  constructor(props) {
    super(props);
    this.state = {
      cols: null,
      rows: null
    }
  }

  fileHandler = (event) => {
    let fileObj = event.target.files[0];
    // 额外新增文件类型校验，避免非Excel文件传入报错
    if (!fileObj.name.match(/\.(xls|xlsx)$/)) {
      alert('请上传.xls/.xlsx格式的Excel文件');
      return;
    }
    ExcelRenderer(fileObj, (err, resp) => {
      if(err){
        console.log(err);
      }
      else{
        this.setState({
          cols: resp.cols,
          rows: resp.rows
        });
      }
    });
  }

  render() {
    return (
      <div>
        <input type="file" onChange={this.fileHandler} style={{"padding":"10px"}} />
        {/* 新增条件判断，有数据才渲染表格 */}
        {this.state.rows && this.state.cols && (
          <OutTable 
            data={this.state.rows} 
            columns={this.state.cols} 
            tableClassName="ExcelTable2007" 
            tableHeaderRowClass="heading" 
          />
        )}
      </div>
    );
  }
}

export default ConvertToJson;

内容的提问来源于stack exchange，提问作者Jennifer