Question

我正在尝试建立一个网站，用户可以在该网站上评论给定帖子。我想在按下按钮时显示评论。一切正常，但是当我单击评论按钮时，我想显示/隐藏评论。我在map函数中使用注释按钮，因此所有元素都在执行它。如何显示/隐藏单个元素的注释？请帮忙。

render() {
  return (
    <div className="container">
      {this.state.queries.map((item, key) => {
        return (
          <div key={key}>
            <hr />

            <div className="list-group-item list-group-item-secondary row ">
              <div className="authorName">{item.name}</div>
              <div>{item.description}</div>
              <hr />
              <div>
                <button
                  className="btn btn-info"
                  data-toggle="collapse"
                  data-target="#demo"
                  onClick={() => {
                    return fetch("/queries/" + item._id)
                      .then(Response => Response.json())
                      .then(data => {
                        this.setState({ comment: data.comments });
                      });
                  }}
                >
                  Comment
                </button>
                <div id="demo" className="collapse">
                  <br />
                  <form
                    className="commentForm"
                    action={"http://localhost:5000/queries/" + item._id}
                    method="POST"
                  >
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Write a comment..."
                      name="comment"
                    />

                    <button className="btn btn-lg btn-primary btn-block">
                      Post
                    </button>
                  </form>
                  <br />
                  <div>
                    {this.state.comment.map((commentItem, key) => {
                      return (
                        <div className="list-group-item list-group-item-success">
                          <span className="authorName">
                            {commentItem.author}
                          </span>
                          {commentItem.text}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

来自服务器的JSON，位于“ localhost：5000 / queries /” + item._id

{
  "comments": [
    {
      "_id": "5b5eadeeb415381598bdc825",
      "text": "sfsdfsd",
      "__v": 0
    },
    {
      "_id": "5b5ecbe5b415381598bdc827",
      "text": "hii from alex",
      "__v": 0
    },
    {
      "_id": "5b5ecd9ed8f72736c830a311",
      "text": "asdad",
      "__v": 0
    }
  ],
  "_id": "5b5ea97f7fb6e02d58b80dba",
  "name": "ram@gmail.com",
  "description": "Is axios still in use?",
  "__v": 3
}

Answer 1

首先，我强烈建议您阅读react文档的Thinking in React部分。您正面临这些问题，因为您没有利用/使用React组件带来的封装功能。

根本原因：您可以在多个地方显示评论，但是您将它们保持在单个状态，因此一个将始终被其他人覆盖。

通过查看您的代码，您似乎正在针对以下结构：

Container -
    - Posts
        - Comments

容器将负责显示所有“帖子”-> this.state.queries.map功能。

每个Post都可以负责呈现自己的注释。这样，即使您有多个帖子，每个帖子都负责他们自己的评论部分。

因此您的post组件可能类似于：

class Post extends React.Component{
  state = {
     comments: []
  }

  render() {

    let {item, key} = this.props;
    return (<div key={key}>
            <hr />

            <div className="list-group-item list-group-item-secondary row ">
              <div className="authorName">{item.name}</div>
              <div>{item.description}</div>
              <hr />
              <div>
                <button
                  className="btn btn-info"
                  data-toggle="collapse"
                  data-target="#demo"
                  onClick={() => {
                    return fetch("/queries/" + item._id)
                      .then(Response => Response.json())
                      .then(data => {
                        this.setState({ comment: data.comments });
                      });
                  }}
                >
                  Comment
                </button>
                <div id="demo" className="collapse">
                  <br />
                  <form
                    className="commentForm"
                    action={"http://localhost:5000/queries/" + item._id}
                    method="POST"
                  >
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Write a comment..."
                      name="comment"
                    />

                    <button className="btn btn-lg btn-primary btn-block">
                      Post
                    </button>
                  </form>
                  <br />
                  <div>
                    {this.state.comment.map((commentItem, key) => {
                      return (
                        <div className="list-group-item list-group-item-success">
                          <span className="authorName">
                            {commentItem.author}
                          </span>
                          {commentItem.text}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>)
}

您的容器可以是：

render() {
  return (
    <div className="container">
      {this.state.queries.map((item, key) => {
        return (<Post item={item} key={key} />)

使用react和node添加评论

1 个答案: