尝试使用 react 和 node 添加评论时出错答案

【问题标题】：Error while trying to add a comment using react and node尝试使用 react 和 node 添加评论时出错
【发布时间】：2018-07-30 12:43:48
【问题描述】：

我正在尝试建立一个网站，用户可以在其中评论给定的帖子。我想在按下按钮时显示评论。一切正常，但是当我单击评论时，它会给出一个错误：- TypeError: _this3 is undefined。在这个平台上很新。请帮忙。

 render() {
    return (
      <div className="container">

        {this.state.queries.map(function(item, key) {
          return( 
        <div key={key}>

          <hr/>

          <div  className="list-group-item list-group-item-secondary row">
              {item.name}
              <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 =>{
                      //console.log("comment is:",data.comments);

                      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="comment..." name="comment"/>

                      <button className="btn btn-lg btn-primary btn-block" >Post</button>
                    </form>
                    <div>

                  </div>
                </div>
              </div>
          </div>
        </div>
          )
      })}
      </div>
    );
  }

来自'localhost:5000/queries/'+item._id 的服务器的json

{
  "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
}

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

最好为此创建一个新方法，然后将其分配给 onClick 方法。我认为您不需要返回声明

const addComment = () => {
  fetch('/queries/'+item._id).
  then((Response)=>Response.json()).
  then(data => {
    //console.log("comment is:",data.comments);
    this.setState({comment:data.comments});
})}

... //then use it like this
<button className="btn btn-info" data-toggle="collapse" data-target="#demo" onClick={this.addComment}

【讨论】：

是的，我搞砸了我的代码。我将为此创建一个单独的方法。谢谢。

【解决方案2】：

问题是您使用的是正常功能，这正在改变您的 this。请改用箭头函数来解决此问题。

this.state.queries.map(function(item, key) { ... }

到

this.state.queries.map((item, key) => { ... }

【讨论】：

成功了。非常感谢。
一个问题，每当我点击一篇文章的评论时，每篇文章的所有评论按钮也会打开。
你对任何帖子的评论如何？
我想在点击评论按钮时显示/隐藏评论。我在 map 函数中使用注释按钮，所以所有元素都在执行它。如何显示/隐藏单个元素的评论？
您可以创建子组件并将其呈现在您的地图中，并在该子组件中处理点击，这样其他 cmets 就不会受到点击的影响。