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个请求，并将它们设置为状态帖子和注释，里面的render（）函数列出了帖子和评论成功呈现但是它列出了所有帖子然后所有评论，而我需要每个帖子及其评论

Answer 1

您可以嵌套2张地图。如果您想在帖子中添加评论，则需要将HTML标记嵌套在彼此内部，然后从另一个内部调用地图。

void function(0, 0,
              1, 2);

void function(0, 0,
     (float)1, 2);

Working JSFiddle

从2 API制作反馈组成的帖子列表及其评论

2个API端点是：

组件：

1 个答案: