this.props不是父子組件之間的函數

Question

設置一個簡單的帖子組件后，能夠從帖子中獲取評論會很酷。

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


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

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

        this.state = {
            comments: [],

        };
    }

    componentDidMount() {

        this.getComments();
    }



    getComments() {
        return axios
            .get("/posts/" + this.props.match.params.id + "/comments")

            .then(result => this.setState({ comments: result.data.comments }))
            .catch(error =>
                this.setState({
                    error
                })
            );
    }
    render() {
        return (
            <div>
                <h2>Comments</h2>
                <Comments />              
            </div>
        );
    }
}

export default Post;

所以之后，放置一個注釋組件以使日志中的帖子評論開始顯示

TypeError：this.props.getComments不是一個函數

那么，不可能通過功能傳遞道具嗎？ 有人知道為什么會發生這個問題嗎？

評論部分

import Comment from "./comment";
import axios from "axios";

import Post from "../screens/posts";


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

      error: ""
    };

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

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

      return comments;
    });
  }

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

export default Comments;

Answer 1

您沒有將函數作為道具傳遞給注釋。

您必須將函數作為道具傳遞，如下所示：

<Comments getComments={this.getComments} />

Answer 2

很難說，但是您似乎在何時使用props和何時使用state上有一些分歧。

我將實際解決此問題，以使其更接近您的預期解決方案，而不是僅僅使其不崩潰（我也將嘗試不與您的風格相差太多）。

Post.js

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


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

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

        this.state = {
            comments: undefined,
            loading: false,
            error: undefined
        };
    }

    componentDidMount() {
        this.loadComments();
    }

    // This doesn't return anything, it doesn't need to as the result is getting put into state
    loadComments() {
       this.setState({ 
           comments: undefined,
           loading: true,
           error: undefined
       };
       axios.get("/posts/" + this.props.match.params.id + "/comments")
            .then(result => this.setState({ 
                comments: result.data.comments,
                loading: false,
                error: undefined
            }))
            .catch(error => this.setState({
                loading: false,
                comments: undefined,
                error
            }));
    }

    // Some loading and error states added
    // Note the passing of comments as a prop to Comments
    render() {
        return (
            <div>
                <h2>Comments</h2>
                {this.state.loading && <div>Loading...</div>}
                {this.state.error && <div>There was an error - {this.state.error}</div>}
                {this.state.comments && <Comments comments={this.state.comments} />}
            </div>
        );
    }
}

export default Post;

Comments.js

import React, { Component } from "react";
import Comment from "./comment";

// No longer needs to do any loading or keep any state of its own (it uses props instead), this could be simplified into an Functional Stateless Component (FSC) now if you wanted to.
class Comments extends Component {    
    render() {
        return (
            <div>
                {this.props.comments.map(comment => (
                    <Comment key={comment.id} comment={comment} />
                ))}
            </div>
        );
    }
}

export default Comments;

Answer 3

您沒有在Post渲染方法中傳遞getComments道具。 像這樣傳遞它們：

<Comments getComments={this.getComments} />