Question

下面是我的FileImport组件，

<thanks>
<tag>
<example>
<new>
<\new>
<\example>
Hello <[World!]> 1
Hello <[World!]> 2
<\tag>
<\thanks>

这是我的其他组件，其中包括FileImport，

import React, {Component} from 'react';
import FileInput from 'react-simple-file-input';
import XLSX from 'xlsx';

var allowedFileTypes = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];

function fileIsIncorrectFiletype(file){
  if (allowedFileTypes.indexOf(file.type) === -1) {
    return true;
  } else {
    return false;
  }
}

class FileImport extends Component {
  constructor(props, context) {
    super(props, context);

    this.cancelButtonClicked = this.cancelButtonClicked.bind(this);
    this.resetCancelButtonClicked = this.resetCancelButtonClicked.bind(this);
    this.showProgressBar = this.showProgressBar.bind(this);
    this.updateProgressBar = this.updateProgressBar.bind(this);
    this.handleFileSelected = this.handleFileSelected.bind(this);
    this.state = {
      cancelButtonClicked: false
    };
  }

  render(){
    return(
      <div>
        To upload a file:

         <label >
            <FileInput 
              readAs='binary'
              style={ { display: 'none' } }

              onLoadStart={this.showProgressBar}
              onLoad={this.handleFileSelected} 
              onProgress={this.updateProgressBar} 
              cancelIf={fileIsIncorrectFiletype}
              abortIf={this.cancelButtonClicked}
              onCancel={this.showInvalidFileTypeMessage}
              onAbort={this.resetCancelButtonClicked}
             />

           <span >
            Click Here  
           </span>

         </label>
         <span>
         {this.handleFileSelected()}
         </span>
      </div>
    );
  }

  cancelButtonClicked(){
    return this.state.cancelButtonClicked;  
  }

  resetCancelButtonClicked(){                                                                 
    this.setState({ cancelButtonClicked: false });
  }

  showInvalidFileTypeMessage(file){
    window.alert("Tried to upload invalid filetype " + file.type);
  }

  showProgressBar(){
    this.setState({ progressBarVisible: true});
  }

  updateProgressBar(event){
    this.setState({
      progressPercent: (event.loaded / event.total) * 100
    });
  }

  handleFileSelected(event, file){
    this.setState({file: file, fileContents: event.target.result});
    var reader = new FileReader();
        var fileContents = event.target.result;
        var workbook = XLSX.read(fileContents, {
        type: 'binary'
      });
      workbook.SheetNames.forEach(function(sheetName) {
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        let studentList = [];
        for(let i =0; i<XL_row_object.length; i++){
            studentList.push(
  <table>
              <tbody>
                <tr>
                    <td type="text" value={XL_row_object[i].Roll_Number} />
                    <td type="text" value={XL_row_object[i].Name} />
                    <td type="text" value={XL_row_object[i].Attendance} />
                </tr>
                </tbody>
                </table>
            )   
        }
        return studentList || null;
      })
    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };

}

export default FileImport;

当我运行它时，它会引发以下错误，

Errors in console - 1

Errors is console - 3

如果我用{this.handleFileSelected（）}调用该函数会发生这种情况，但是如果我用{this.handleFileSelected}调用该函数它不会抛出错误但是数据不会显示，尽管返回对象具有全部需要显示的元素。

Answer 1

您应该只是调用您的函数：

{this.handleFileSelected()}

无法呈现函数返回的反应元素

1 个答案: