Javascript 每次单击时，仅针对列表中的一项

嘿，我对编程很陌生，我正试图解决这个问题，我被卡住了

在浏览器中显示API中的10篇文章-正常工作

每个帖子显示3条相关评论-工作

问题是，当我从提要中单击一篇文章时，单击功能将同时获取并显示相应文章下方的所有其他评论…我试图完成的是，在单击其他文章时，再次单击相关文章的显示评论并将其隐藏

此外，我需要显示一个按钮“加载更多”每次一组评论出现，并获取最新的10条评论时点击

任何关于如何保持事物干净易读的帮助和建议都将不胜感激

先谢谢你,

：）

代码如下：

import React from "react";
import axios from "axios";

const postsID = "/posts";
const commentsID = "/comments";
var postsURL = `https://jsonplaceholder.typicode.com${postsID}`;
var commentsURL = `https://jsonplaceholder.typicode.com${commentsID}`;

class Posts extends React.Component {
constructor(props) {
super(props);
this.state = {
  posts: [],
  comments: [],
  expanded: false,
  commentsToShow: 3
};
this.clicked = this.clicked.bind(this);
}
/*
showMoreComments() {

}
*/
clicked() {
  axios.get(commentsURL).then(res => {
    console.log("comments:", res);
   this.setState({ comments: res.data });
 });
}

componentDidMount() {
 axios.get(postsURL).then(res => {
   console.log("posts:", res);
   this.setState({ posts: res.data });
 });
}

render() {
  //console.log('VARIABLE WORKING!', postsURL);

  return (
    <div className="container">
      <div className="jumbotron-div col s12">
        <ul className="collection">
          {this.state.posts.slice(0, 10).map(post => (
            <div>
              <div key={post.id} onClick={this.clicked}>
                <h5>User ID: {post.id}</h5>
                <p>Post: {post.body}</p>
              </div>
              <div>
                <ul className="collection">
                  {this.state.comments
                    .filter(comment => comment.postId === post.id)
                    .slice(0, 3)
                    .map(comment => (
                      <li key={comment.id}>
                        <p>Comment ID: {comment.postId}</p>
                        <p>Comment: {comment.body}</p>
                      </li>
                    ))}
                </ul>
              </div>
            </div>
          ))}
        </ul>
      </div>
     </div>
  );
}
}

export default Posts;

从“React”导入React；
从“axios”导入axios；
const postsID=“/posts”；
const commentsID=“/comments”；
var postsURL=`https://jsonplaceholder.typicode.com${postsID}`；
var commentsURL=`https://jsonplaceholder.typicode.com${commentsID}`；
类发布扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
员额：[]，
评论：[]，
扩展：错，
评论节目：3
};
this.clicked=this.clicked.bind（this）；
}
/*
showMoreComments（）{
}
*/
点击（）{
get（commentsURL）.then（res=>{
日志（“注释：”，res）；
this.setState（{comments:res.data}）；
});
}
componentDidMount（）{
get（postsURL）.then（res=>{
日志（posts:，res）；
this.setState（{posts:res.data}）；
});
}
render（）{
//log（'VARIABLE WORKING！'，postsURL）；
返回(

{this.state.posts.slice（0,10）.map（post=>(
用户ID:{post.ID}
Post:{Post.body}


{this.state.comments
.filter（comment=>comment.postId===post.id）
.slice（0,3）
.map（注释=>(

注释ID:{Comment.postId}

注释：{Comment.body}


))}

))}

);
}
}
导出默认职位；

如果帖子可以显示或隐藏评论，那么它肯定需要自己的状态。因此，它需要是自己的组件，例如：

 class Post extends React.Component {
   constructor(props) {
     super(props);
     this.state = { showComents: false };
   }

   render() {
     const { id, body, comments } = this.props;

     return (
         <div key={id} onClick={() => this.setState({showComments: true })}>
           <h5>User ID: {id}</h5>
           <p>Post: {body}</p>
        </div>
        <div>
          <ul className="collection">
            {this.state.showComments ? comments.slice(0, 3)
                .map(comment => (
                  <li key={comment.id}>
                    <p>Comment ID: {comment.postId}</p>
                    <p>Comment: {comment.body}</p>
                  </li>
                )) : ""}
            </ul>
          </div>
        </div>
      ))}
     );
   }
 }

class Post扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={showComents:false}；
}
render（）{
const{id，body，comments}=this.props；
返回(
this.setState（{showComments:true}}>
用户ID:{ID}
帖子：{body}


{this.state.showcoments？comments.slice（0,3）
.map（注释=>(

注释ID:{Comment.postId}

注释：{Comment.body}


)) : ""}

))}
);
}
}

---

然后在帖子内部使用

并传递帖子所需的所有数据。

仍然不起作用……如果你能给出一个更好的例子的话？