React TypeError this._test 不是函数

IT技术 javascript reactjs syntax-error ecmascript-6
2021-03-24 09:45:10

因为我是 JavaScript 和 React 的新手，所以我真的很难弄清楚正确的语法。

这是我的问题：

_handleDrop(files)应该调用该函数，_validateXML(txt)但没有调用。我收到此错误Uncaught TypeError: this._validateXML is not a function，但无法弄清楚原因。回调_handleDrop(files)工作正常。

当我尝试这种语法时，_validateXML:function(txt)我在编译时立即出错。那是因为 ecmascript 吗？

import React from 'react';
import './UploadXML.scss';
import Dropzone from 'react-dropzone';
import xml2js from 'xml2js';

export default class UploadXML extends React.Component {

  constructor() {
    super();
    this._validateXML = this._validateXML.bind(this);
  }

  _validateXML(txt) {
    console.log('Received files: ', txt);
  }

  _handleDrop(files) {
    if (files.length !== 1) {
      throw new Error("Please upload a single file");
    }
    var file = files[0];

    console.log('Received files: ', file);

    this._validateXML(file);
  }

  render() {
    return (
      <div>
            <Dropzone onDrop={this._handleDrop} multiple={false}>
              <div>Try dropping some files here, or click to select files to upload.</div>
            </Dropzone>
      </div>
    );
  }
}
3个回答

当您使用 ES6 类而不是 React.createClass 时，它不会自动绑定this。

之所以：

React.createClass 有一个内置的魔法特性，可以自动为你绑定所有方法。对于不习惯其他类中的此功能的 JavaScript 开发人员来说，这可能会有点混乱，或者当他们从 React 转移到其他类时可能会感到困惑。

因此我们决定不将这个内置到 React 的类模型中。如果需要，您仍然可以在构造函数中显式地预绑定方法。

另见：http : //facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

在这个实例中你可以做的是将它绑定到你的 _handleDrop 函数，比如：

<Dropzone onDrop={this._handleDrop.bind(this)} multiple={false}>

您还可以从构造函数中删除函数的分配。

这通过该onSubmit部分中的表格解决了我的问题。我在被调用的方法中调用了另一个方法，但它不能。
2021-06-21 09:45:10

我们解决这个问题的方法是使用一个实验性的 es7 特性，它允许你在类中以这种方式声明一个函数：

handleExpandCollapse = () => {
    this.setState({
      isExpanded: !this.state.isExpanded,
    });
  }

这是自动绑定的，所以你的JSX将是相同的。

此外，当 Some One 将函数向下传递给名称错误的子组件时，也可能发生此错误（不在问题的上下文中），即由于拼写错误而未定义在子组件中访问的函数。

我来这里是为了弄清楚这一点，但发现我就是这种情况。:) 希望它会帮助某人。

其它你可能感兴趣的问题
上一篇为什么我的 webpack bundle.js 和 vendor.bundle.js 如此之大？ 下一篇es6 解构但传递动态变量