Я использую две конечные точки API в своем приложении React.js и в Axios, поэтому он должен отображать сообщения и их комментарии под ними.

Проблема в том, что я не могу выполнить две функции карты внутри друг друга, чтобы сделать это, я погуглил проблему, но у меня не было руководства, я также думал использовать другие функции JavaScript, такие как сокращение, вместо карты, но я не думаю, что это сработает.

Две конечные точки 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;

В предыдущем фрагменте кода я сделал 2 запроса к конечным точкам api и установил их для состояний сообщений и комментариев, функция Inside render () успешно отображает список сообщений и комментариев, но в нем перечислены все сообщения, затем все комментарии, и мне нужна каждая публикация со своими комментариями

0
Mohamed Hassan 14 Мар 2018 в 21:43
Вложить в первый список другой список с комментариями, отфильтрованными по post.id
 – 
1252748
14 Мар 2018 в 21:52

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

0
SirPeople 14 Мар 2018 в 22:00