Question

我正在学习React，并试图将<Comment/>组件内部渲染为自身，但是出现以下错误：

TypeError: Cannot read property 'map' of undefined
Comment._this.getResponses
src/Comment.js:28
  25 |   );
  26 | }
  27 | getResponses = () => {
> 28 |   return this.props.responses.map(p => {
     | ^  29 |     return (
  30 |       <Comment
  31 |         author={p.author}

和代码：

import React, { Component } from "react";

class Comment extends Component {
  render() {
    return (
      <div className="comment">
        <a className="avatar">
          <img src={this.props.avatar} />
        </a>
        <div className="content">
          <a className="author">{this.props.author}</a>
          <div className="metadata">
            <span className="date">{this.props.timeStamp}</span>
          </div>
          <div className="text">
            <p>{this.props.text}</p>
          </div>
          <div className="actions">
            <a className="reply">Reply</a>
          </div>
        </div>
        <div className="comments">{this.getResponses()}</div>
      </div>
    );
  }
  getResponses = () => {
    return this.props.responses.map(p => {
      return (
        <Comment
          author={p.author}
          avatar={p.avatar}
          timeStamp={p.timeStamp}
          text={p.text}
        />
      );
    });
  };
}

export default Comment;

请注意，this.props.responses不是undefined，并且仅在我尝试使用Comment组件时才会出现问题。如果我在这里替换Comment组件：

return this.props.responses.map(p => {
  return <Comment
      author={p.author}
      avatar={p.avatar}
      timeStamp={p.timeStamp}
      text={p.text}
    />
});

具有这样的内容：

return this.props.responses.map(p => {
  return (
    <div>
      <h1>author={p.author}</h1>
      <h1>avatar={p.avatar}</h1>
      <h1>timeStamp={p.timeStamp}</h1>
      <h1>text={p.text}</h1>
    </div>
  );
});

代码有效。

Answer 1

这是因为<Comment />的呈现依赖于定义的responses道具。

当前，在Comment中渲染getResponses()组件时，没有为这些注释分配responses道具：

<Comment
      author={p.author}
      avatar={p.avatar}
      timeStamp={p.timeStamp}
      text={p.text}
    />

这反过来意味着呈现这些<Comment />组件时将引发错误，并且它们尝试通过未定义的{{调用getResponses()来呈现自己的“子项” 1}}属性。

要解决此问题，您可以检查responses数组是否已定义，然后再继续在this.props.responses方法中映射和渲染<Comment/>组件，如下所示：

getResponses()

如何在自己内部渲染一个React组件

1 个答案: