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

我正在学习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>
  );
});

该代码有效。

最佳答案

这是因为<Comment />的呈现依赖于所定义的responses属性。

当前，当您在Comment中渲染getResponses()组件时，没有为这些注释分配responses属性:

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

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

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

getResponses = () => {

    // Check that responses prop is an array before
    // attempting to render child Comment components
    if(!Array.isArray(this.props.responses)) {
        return null;
    }

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