React 教程：TypeError：无法读取未定义的属性“props”

IT技术 javascript reactjs
2021-05-22 04:27:15

我决定学习 React 并从官方教程开始。一切都很好，直到我的代码达到这种状态：

var CommentBox = React.createClass({
  render: () => {
    return (
      <div className="commentBox">
        <h1> Comments </h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: () => {
    return (
      <div className="commentForm">
        Hello, world! I am a comment form;
      </div>
    );
  }
});

var Comment = React.createClass({
  rawMarkup: () => {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render: () => {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2> // <--- [[[[[[ ERROR IS HERE ]]]]]]
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: () => {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment yo</Comment>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

当我尝试运行它时，我在 devtools 中收到以下错误：

类型错误：无法读取未定义的属性“props”

...调试器在标记的行处暂停（见代码）。当我将鼠标悬停this在 中时{this.props.author}，我会预览具有该props属性的对象以及所有内容...

4个回答

使用函数声明（render() {}或render: function {}）代替箭头函数render: () => {} 

var Comment = React.createClass({
  rawMarkup() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </div>
    );
  }
});

Example

一个arrow function相比函数表达式表达具有较短的语法和词汇结合此值（不结合其自身的此，自变量，超级或new.target）。箭头函数总是匿名的。

我有同样的错误信息：

无法读取未定义的属性“props”

...但出于不同的原因：当this从函数内部调用时，javascript 无法访问该变量，因为this它在外部范围内。（注意：我在 ES5 中）

在这种情况下，只需存储this在函数之前的另一个变量中（在您的组件范围内）：var that = this;

然后您将能够that.props从函数内部调用。

希望这对收到该错误消息的其他人有所帮助。

详细示例如下：

render: function() {
  var steps = [];
  var that = this;  // store the reference for later use
  var count = 0;
  this.props.steps.forEach(function(step) {
      steps.push(<Step myFunction={function(){that.props.anotherFunction(count)}}/>);  // here you are
      count += 1;
  });
  return (
    <div>{steps}</div>
  )
}

有点晚的帖子/答案。

尝试在构造函数中绑定你的函数

例子：

this.yourfunction = this.yourfunction.bind(this);

我在 ES6 上，箭头函数成功了：rawMarkup = () => {}

其它你可能感兴趣的问题
上一篇我真的可以在堆肥上扔失败的 PLA 印刷品吗？ 下一篇P3Steel 的 Z 轴上支架在 v1.x/2.x 和 v4 之间有所不同