开发者问题收集

“无法读取未定义的属性‘props’” React 问题

2016-12-06
4958

我正在根据 本教程 在 React 中构建应用程序。 我没有使用更新的 es2016,而是使用较旧的方法,因此在应对随之而来的挑战时遇到了一些麻烦。我在浏览器中收到此错误:“TypeError:无法读取未定义的属性‘props’”。我假设它指向 {this.props.onDelete} 部分。这是我的 Notes.jsx 组件代码片段:

var Notes = React.createClass({
render: function () {

return (
  <ul>
    {this.props.notes.map(
      function(note) {
        return (
          <li key={note.id}>
            <Note
              onTheDelete={this.props.onDelete}
              task={note.task} />
          </li>
        );
      }
    )}
  </ul>
);
}
});

这是 App.jsx 的片段,它是父级:

var App = React.createClass({
  getInitialState: function () {
    return {
      notes: [
        {
          id: uuid.v4(),
          task: 'Learn React'
        },
        {
          id: uuid.v4(),
          task: 'Do laundry'
        }
      ]
    }
  },

  newNote: function () {
    this.setState({
      notes: this.state.notes.concat([{
        id: uuid.v4(),
        task: 'New task'
      }])
    });
  },

  deleteNote: function() {
    return 'hi';
  },

  render: function () {
    var {notes} = this.state;

    return (
      <div>
        <button onClick={this.newNote}>+</button>
        <Notes notes={notes} onDelete={this.deleteNote}/>
      </div>
    );
  }
});

我从 deleteNote 中删除了实际有用的部分,以确保没有问题。我很难理解如何使用“this”以及我在教程中提到的绑定的作用。

2个回答

map 函数内的 this 与函数外部的 this 不同,这是由于 JS 的工作方式所致。

您可以保存 this.props.onDelete 并在没有 props 引用的情况下使用它:

render: function () {
  var onDelete = this.props.onDelete;

  return (
    <ul>
      {this.props.notes.map(
        function(note) {
          return (
            <li key={note.id}>
              <Note
                onTheDelete={onDelete}
                task={note.task} 
              />
            </li>
          );
        }
      )}
    </ul>
  );
}

无关,但我会将该 map 函数移到其自己的函数中并避免深度嵌套。

Dave Newton
2016-12-06

Dave Newton 的回答 完全正确,但我只想补充一点,如果您使用 ES6 箭头函数,那么您可以避免必须保留对此的额外引用,以及删除 return 语句并利用隐式返回语法。

var Notes = React.createClass({
    render: function () {
        return (
          <ul>
            {this.props.notes.map(
              note => {(
                  <li key={note.id}>
                    <Note
                      onTheDelete={this.props.onDelete}
                      task={note.task} />
                  </li>
                )}
            )}
          </ul>
        );
    }
});
Alex Young
2016-12-06