React TypeError：无法在传递道具时读取未定义的属性“地图”

Question

从 post 组件获取 cmets 数组并将其传递给 cmets 组件后 日志开始在下面的屏幕截图中显示错误

组件是：

import React, { Component } from "react";
import axios from "axios";

import Comments from "../components/comments";

    class Article extends Component {
        constructor(props) {
            super(props);

            this.state = {
                title: "",
                error: "",
                comment: ""
            };
        }

        componentDidMount() {

            this.getComments();
        }


        getComments = () => {
            const {
                match: { params }
            } = this.props;

            return axios
                .get(`/articles/${params.id}/comments`, {
                    headers: {
                        Accept: "application/json",
                        "Content-Type": "application/json",

                    }
                })
                .then(response => {
                    return response.json();
                })
                .then(response => this.setState({ comments: response.comments }))
                .catch(error =>
                    this.setState({
                        error
                    })
                );
        };



        render() {
            return (
                <div>
                    {this.state.title}
                    <div>
                        <h2>Comments</h2>
                        <Comments
                            getComments={this.getComments}

                        />
                    </div>

                </div>
            );
        }
    }

    export default Article;

和评论组件

import React, { Component } from "react";
import PropTypes from "prop-types";
import Comment from "./comment";
import axios from "axios";

import Article from "../screens/article";

class Comments extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: [],

      comment: "",
      error: ""
    };

    this.load = this.load.bind(this);

    this.comment = this.comment.bind(this);
  }

  componentDidMount() {
    this.load();
  }

  load() {
    return this.props.getComments().then(comments => {
      this.setState({ comments });

      return comments;
    });
  }

  comment() {
    return this.props.submitComment().then(comment => {
      this.setState({ comment }).then(this.load);
    });
  }

  render() {

    const { comments } = this.state;

    return (
      <div>
        {comments.map(comment => (
          <Comment key={comment.id} commment={comment} />
        ))}
      </div>
    );
  }
}



export default Comments;

所以，我尝试通过 props 传递它，并在 cmets 组件上设置状态。 而不是只使用 cmets.map 我尝试使用 this.state 但在日志中显示相同的错误。 那么，有人想澄清这种问题吗？ 使用 react 时似乎很常见的问题。

Answer 1

如果发生错误，请执行以下操作：

  .catch(error =>  this.setState({ error  }) );

这使得链式承诺解析为undefined，并在Comments 状态下用作comments。所以你必须从 catch 中返回一个数组：

 .catch(error => {
   this.setState({ error });
   return [];
 });

此外，如果父状态包含错误，则根本不渲染 Comments 子是有意义的。

Answer 2

另一种方法是检查它是否是一个数组，如果是，检查它的长度，然后做.map。您已将 cmets 初始化为空数组，因此我们不需要检查它是否是一个数组，但如果 api 响应接收到一个对象，那么它会将对象设置为 cmets，因此在这种情况下 cmets.length 将不起作用所以看看是不是数组就好了。

下面的改变会起作用

  <div>
    {Array.isArray(comments) && comments.length>0 && comments.map(comment => (
      <Comment key={comment.id} commment={comment} />
    ))}
  </div>

Answer 3

cmets 组件第一次渲染时还没有响应，所以 cmets 是未定义的。

    import React, { Component } from "react";
import PropTypes from "prop-types";
import Comment from "./comment";
import axios from "axios";

import Article from "../screens/article";

class Comments extends Component {
  constructor(props) {
    super(props);
    this.state = {
      comments: [],

      comment: "",
      error: ""
    };

    this.load = this.load.bind(this);

    this.comment = this.comment.bind(this);
  }

  componentDidMount() {
    this.load();
  }

  load() {
    return this.props.getComments().then(comments => {
      this.setState({ comments });

      return comments;
    });
  }

  comment() {
    return this.props.submitComment().then(comment => {
      this.setState({ comment }).then(this.load);
    });
  }

  render() {

    const { comments } = this.state;

    if (!comments) return <p>No comments Available</p>;

    return (
      <div>
        {comments.map(comment => (
          <Comment key={comment.id} commment={comment} />
        ))}
      </div>
    );
  }
}



export default Comments;