Reactjs 关于超级（道具）移除的Eslint警告会破坏代码

我学习了反应和阅读代码，现在我看到了这个Eslint警告

我重构代码如下：删除

props

constructor() {
    super();
    this.state = this.parse();
}

现在Eslint很高兴，但是代码中断了，因为

props

可能无法在

this.parse（）中使用

这是怎么回事

完整代码：

// Copyright (c) 2017 PlanGrid, Inc.

import React, { Component } from 'react';
import XLSX from 'xlsx';

import CsvViewer from './csv-viewer';
import WithFetching from '../file-viewer/fetch-wrapper';

class XlxsViewer extends Component {
    constructor(props) {
        super(props);
        this.state = this.parse();
    }

    parse() {
        const { data } = this.props;
        const dataArr = new Uint8Array(data);
        const arr = [];

        for (let i = 0; i !== dataArr.length; i += 1) {
            arr.push(String.fromCharCode(dataArr[i]));
        }

        const workbook = XLSX.read(arr.join(''), { type: 'binary' });
        const names = Object.keys(workbook.Sheets);
        const sheets = names.map(name => XLSX.utils.sheet_to_csv(workbook.Sheets[name]));

        return { sheets, names, curSheetIndex: 0 };
    }

    renderSheetNames(names) {
        const sheets = names.map((name, index) => (
            <input
                key={name}
                type="button"
                value={name}
                onClick={() => {
                    this.setState({ curSheetIndex: index });
                }}
            />
        ));

        return <div className="sheet-names">{sheets}</div>;
    }

    renderSheetData(sheet) {
        const csvProps = { ...this.props, data: sheet };
        return <CsvViewer {...csvProps} />;
    }

    render() {
        const { sheets, names, curSheetIndex } = this.state;
        return (
            <div className="spreadsheet-viewer">
                {this.renderSheetNames(names)}
                {this.renderSheetData(sheets[curSheetIndex || 0])}
            </div>
        );
    }
}

export default WithFetching(XlxsViewer);

//版权所有（c）2017 PlanGrid公司。
从“React”导入React，{Component}；
从“XLSX”导入XLSX；
从“/csv查看器”导入CsvViewer；
从“../file viewer/fetch wrapper”导入WithFetching；
类XlxsViewer扩展组件{
建造师（道具）{
超级（道具）；
this.state=this.parse（）；
}
parse（）{
const{data}=this.props；
const dataArr=新的Uint8Array（数据）；
常数arr=[]；
for（设i=0；i！==dataArr.length；i+=1）{
arr.push（String.fromCharCode（dataArr[i]））；
}
constworkbook=XLSX.read（arr.join（“”），{type:'binary'}）；
常量名称=Object.key（workbook.Sheets）；
const sheets=names.map（name=>XLSX.utils.sheet_to_csv（workbook.sheets[name]）；
返回{sheets，names，curSheetIndex:0}；
}
renderSheetNames（名称）{
const sheets=names.map（（名称、索引）=>(
{
this.setState（{curSheetIndex:index}）；
}}
/>
));
返回{张}；
}
渲染表数据（第页）{
const csvProps={…this.props，数据：sheet}；
返回；
}
render（）{
const{sheets，names，curSheetIndex}=this.state；
返回(
{this.renderSheetNames（names）}
{this.renderSheetData（sheets[curSheetIndex | | 0]））
);
}
}
使用抓取导出默认值（XlxsViewer）；
我们使用超级（道具）来访问构造函数中的道具。您没有在构造函数中使用道具，这就是eslint给出错误的原因

所以为了消除eslint和代码构建中的错误

 constructor() {
        this.state = this.parse();
    }


使用箭头函数进行绑定

parse=()=>{
//code
}

建议将
parse（）
部分移动到
componentDidMount（）
。应仅在两种情况下使用，且不应有任何副作用：


通过将对象分配给此.state初始化本地状态
将事件处理程序方法绑定到实例

另外，不调用
super（props）
将导致无法在
此.props中包含实际值，因为它将
未定义

使用以下命令重构此代码：

import React, { Component } from "react";
import XLSX from "xlsx";

import CsvViewer from "./csv-viewer";
import WithFetching from "../file-viewer/fetch-wrapper";

class XlxsViewer extends Component {
  componentDidMount() {
    this.parse();
  }

  parse() {
    const { data } = this.props;
    const dataArr = new Uint8Array(data);
    const arr = [];

    for (let i = 0; i !== dataArr.length; i += 1) {
      arr.push(String.fromCharCode(dataArr[i]));
    }

    const workbook = XLSX.read(arr.join(""), { type: "binary" });
    const names = Object.keys(workbook.Sheets);
    const sheets = names.map((name) =>
      XLSX.utils.sheet_to_csv(workbook.Sheets[name])
    );

    this.setState({ sheets, names, curSheetIndex: 0 });
  }
  ...
}

export default WithFetching(XlxsViewer);

如果不使用
props
参数，代码如何“中断”？什么具体问题？另外，看起来这个警告在技术上是不正确的，有这样的帖子：它在这里中断
const{data}=this.props数据不存在。老实说，这看起来像是一个TypeScript错误（请参阅此处的一个conva:），因此当它抱怨
超级（道具）
时，您可以放心地忽略它。Microsoft应该修复它，然后您就可以更新您的依赖项了。现在，不要理会。没错，如果愿意，可以将props传递给
parse
参数。这有点奇怪，但从技术上讲应该是功能性的，当我这样做时，它在这里中断：
const{data}=this.props数据不存在！也许我应该传下
props
像这样
parse（props）仅使用箭头函数进行绑定。我已经更新了awnser