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时遇到了麻烦。

我将切实解决此问题，以使其更接近您的预期解决方案，而不是仅仅使其不崩溃（我还将尽量不偏离您的风格）。 / p>

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} />

this.props不是父子组件之间的函数

3 个答案: