无法在回调函数中访问属性React

Posted 2021-05-02

我正在使用一个名为Papa Parse的库来将csv文件解析为json。解析器工作正常，但我无法在配置对象的“完整”部分中为Papa解析指定的回调函数中调用我的操作创建器。我认为这是一个范围问题，但我一直无法解决它。下面感兴趣的主要部分是为什么我不能调用'printFile'函数中的任何一个函数，最重要的是'addRoster'函数。请告诉我您有任何建议或想法。谢谢！

编辑：忽略这是片段形式。什么在这里是不可运行的，我只是无法使格式化工作。

class Roster extends Component {

  super(props) {

    this.printFile = this.printFile.bind(this);

    this.testMethod = this.testMethod.bind(this);
  }

  componentWillMount() {
    this.props.addRoster('test')
  }

  printFile(results, file) {
    this.props.addRoster(file);
    this.props.testMethod;
  }

  testMethod(test) {
    console.log("Winner")
  }

  fileDrop(file) {

    var config = {
      delimiter: "", // auto-detect
      newline: "", // auto-detect
      quoteChar: '"',
      header: true,
      dynamicTyping: false,
      preview: 0,
      encoding: "",
      worker: false,
      comments: false,
      step: undefined,
      complete: this.printFile,
      error: undefined,
      download: false,
      skipEmptyLines: false,
      chunk: undefined,
      fastMode: undefined,
      beforeFirstChunk: undefined,
      withCredentials: undefined
    }
    Papa.parse(file, config)
  }


  render() {
    const {
      addRoster
    } = this.props;

    return ( <
      Grid >
      <
      Row >
      <
      MyDropzone onFileDrop = {
        this.fileDrop.bind(this)
      }
      /> < /
      Row > <
      /Grid>
    )
  }

}

export default connect(null, {
  addRoster
})(Roster);

答案

我认为你没有添加一个构造函数，所以函数没有绑定？尝试改变这个

super(props) 
{
  this.printFile = this.printFile.bind(this);
  this.testMethod = this.testMethod.bind(this);
}

至

constructor(props) 
{
  super(props);
  this.printFile = this.printFile.bind(this);
  this.testMethod = this.testMethod.bind(this);
}