从 2 个 API 制作帖子列表及其下方评论的 React 组件

Question

我在我的 React.js 应用程序和 Axios 中使用了两个 API 端点，因此它必须在它们下面列出帖子及其评论。

问题是我无法在彼此内部执行两个映射函数来做到这一点，我用谷歌搜索了这个问题，但我没有线索，我也想使用其他 JavaScript 函数，如 Reduce 而不是 map，但我认为它不会成功。

2 个 API 端点是：

https://jsonplaceholder.typicode.com/posts

https://jsonplaceholder.typicode.com/comments?postId=1

组件：

import React, { Component } from 'react';
import axios from 'axios';
import './Postlist.css';
class Postlist extends Component {
  state = {
    posts: [],
    comments: []
  };
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => {
      const posts = res.data;
      this.setState({ posts });
    });
    axios.get(`https://jsonplaceholder.typicode.com/comments`).then(res => {
      const comments = res.data;
      this.setState({ comments });
    });
  }
  render() {
    return (
      <div className="container">
        <div className="jumbotron-div col s12">
          <ul className="collection">
            {this.state.posts.map(post => (
              <li
                key={post.id}
                className="collection-item left-align red lighten-3"
              >
                <h5>User ID: {post.id}</h5>
                <p>Post: {post.body}</p>
              </li>
            ))}
          </ul>
        </div>
        <div className="jumbotron-div col s12">
          <ul className="collection">
            {this.state.comments.map(comment => (
              <li
                key={comment.id}
                className="collection-item left-align purple lighten-2"
              >
                <p>User ID: {comment.id}</p>
                <p>Post: {comment.body}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}
export default Postlist;

在前面的代码片段中，我向 api 端点发出了 2 个请求，并将它们设置为状态帖子和评论，Inside render(( 函数中的帖子和评论列表成功呈现，但它列出了所有帖子，然后列出了所有评论，我需要每个帖子及其评论

Answer 1

您可以嵌套 2 张地图。如果你想在帖子中发表评论，你需要将你的HTML标签嵌套在彼此之间，然后从另一个标签内部调用地图。

class Postlist extends React.Component {
    state = {
        posts: [],
        comments: []
    };
    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => {
            const posts = res.data;
            this.setState({ posts });
        });
        axios.get(`https://jsonplaceholder.typicode.com/comments`).then(res => {
            const comments = res.data;
            this.setState({ comments });
        });
    }
    render() {
        return (
            <div className="container">
                <div className="jumbotron-div col s12">
                    <ul className="collection">
                        {this.state.posts.map(post =>
                            (
                                <div>
                                    <li
                                        key={post.id}
                                        className="collection-item left-align red lighten-3"
                                    >
                                        <h5>User ID: {post.id}</h5>
                                        <p>Post: {post.body}</p>
                                    </li>
                                    <div className="jumbotron-div col s12">
                                        <ul className="collection">
                                            {
                                                this.state.comments.map(comment => (
                                                    <li
                                                        key={comment.id}
                                                        className="collection-item left-align purple lighten-2"
                                                    >
                                                        <p>User ID: {comment.id}</p>
                                                        <p>Post: {comment.body}</p>
                                                    </li>
                                                )
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            ))
                        }
                    </ul>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <Postlist name="World" />,
    document.getElementById('container')
);

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

工作 JSFiddle