Question

我不能为我的生活找出以下代码的错误，当用户通过 BugAdd 表单添加错误时，值会传递给 handleSubmit 函数反过来应该将其道具传递给 addBug 。

然而，当我提交表单时，我看到'console.log（“添加bug：”，bug）;'

然后在此之后我收到“react.min.js：14 Uncaught TypeError：无法读取未定义的属性'错误'，我最初的想法是，也许我错过了某个地方的.bind。

任何人都可以发现我的代码存在问题，它在重构到ES6之前工作正常

class BugAdd extends React.Component {
  render() {
    console.log("Rendering BugAdd");
    return (
      <div>
        <form name="bugAdd">
          <input type="text" name="owner" placeholder="Owner" />
          <input type="text" name="title" placeholder="Title" />
          <button onClick={this.handleSubmit.bind(this)}>Add Bug</button>
        </form>
      </div>
    )
  }

  handleSubmit(e) {
    e.preventDefault();
    var form = document.forms.bugAdd;
    this.props.addBug({owner: form.owner.value, title: form.title.value, status: 'New', priority: 'P1'});
    // clear the form for the next input
    form.owner.value = ""; form.title.value = "";
  }
}

class BugList extends React.Component {

  constructor() {
    super();
    this.state = {
      bugs: bugData
    }
  }

  render() {
    console.log("Rendering bug list, num items:", this.state.bugs.length);
    return (
      <div>
        <h1>Bug Tracker</h1>
        <BugFilter />
        <hr />
        <BugTable bugs={this.state.bugs} />
        <BugAdd addBug={this.addBug} />
      </div>
    )
  }

  addBug(bug) {
      console.log("Adding bug:", bug);
      // We're advised not to modify the state, it's immutable. So, make a copy.
      var bugsModified = this.state.bugs.slice();
      bug.id = this.state.bugs.length + 1;
      bugsModified.push(bug);
      this.setState({bugs: bugsModified});
  }
}

Answer 1

当您使用ES6类扩展React.Component时，组件方法不会像使用this时那样自动双向React.createClass。您可以在official documentation。

中详细了解相关信息

在您的情况下，最干净的解决方案是将构造函数中的addBug方法绑定到组件this，如下所示：

class BugList extends React.Component {

  constructor() {
    super();
    this.state = {
      bugs: bugData
    }
    this.addBug = this.addBug.bind(this);
  }

  render() {
    console.log("Rendering bug list, num items:", this.state.bugs.length);
    return (
      <div>
        <h1>Bug Tracker</h1>
        <BugFilter />
        <hr />
        <BugTable bugs={this.state.bugs} />
        <BugAdd addBug={this.addBug} />
      </div>
    )
  }

  addBug(bug) {
      console.log("Adding bug:", bug);
      // We're advised not to modify the state, it's immutable. So, make a copy.
      var bugsModified = this.state.bugs.slice();
      bug.id = this.state.bugs.length + 1;
      bugsModified.push(bug);
      this.setState({bugs: bugsModified});
  }
}

现在您将能够访问this.state。

Answer 2

尝试使用addBug定义您的=>方法，该方法将自动绑定到类实例：

  addBug = (bug) => {
      console.log("Adding bug:", bug);
      // We're advised not to modify the state, it's immutable. So, make a copy.
      var bugsModified = this.state.bugs.slice();
      bug.id = this.state.bugs.length + 1;
      bugsModified.push(bug);
      this.setState({bugs: bugsModified});
  }

不要忘记将Class属性转换添加到您的babel http://babeljs.io/docs/plugins/transform-class-properties/

React JS - 在重构到ES6之后未定义

2 个答案: