Слияние двух API от JsonPlaceholder - PullRequest
Новая
       2

Слияние двух API от JsonPlaceholder

0 голосов
/ 20 сентября 2019

Я новичок в кодировании, и я нахожусь в процессе создания блогового приложения.Я использую Axios, чтобы сделать вызовы API для Jsonplaceholder.Я пытаюсь отобразить div, который отображает заголовок, описание и имя, но постоянно получаю сообщение об ошибке.Любые идеи о том, как объединить вызовы API или даже лучший способ кодировать это?

Вот мой код: 

import React from 'react'
import axios from 'axios'
import '../Styles/content.css'

class Content extends React.Component {
  state ={
    posts: [],
    users: []
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts?_start=10&_limit=10')
    .then(resp => resp.data)
    .then((data) => {
      this.setState({posts: data})
      console.log(this.state.posts)
    }).then(
      axios.get('https://jsonplaceholder.typicode.com/users')
    .then(resp => resp.data)
    .then((data) => {
      this.setState({users: data})
      console.log(this.state.users)
    })
    )    
  }

  render() {
    return (
      <div className='contentContainer'>
        {this.state.posts.map(post => (
          <div className='blogs'key={post.id}>
            <div className='blogsPost'>
              <p className='postTitle'>{post.title}</p>
              <p className='postbody'>{post.body}</p>
            </div>
            {this.state.users.filter(user => (
              <div className='blogsUsers'>
                <p>{user.name}</p>
              </div>
            ))}
          </div>
        ))}
      </div>
    )
  }
}

export default Content

1 Ответ

0 голосов
/ 20 сентября 2019

Я не уверен, что вы хотите найти пользователя, который разместил содержимое блога и выложил его, но я думаю, что это будет вашим решением. 

class Content extends React.Component {
  state = {
    posts: [],
    users: []
  };

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/posts?_start=10&_limit=10")
      .then(resp => resp.data)
      .then(data => {
        this.setState({ posts: data });
        console.log(this.state.posts);
      })
      .then(
        axios
          .get("https://jsonplaceholder.typicode.com/users")
          .then(resp => resp.data)
          .then(data => {
            this.setState({ users: data });
            console.log(this.state.users);
          })
      );
  }

  render() {
    return (
       <div className="contentContainer">
        {this.state.posts.map(post => {
          const { userId } = post;
          return (
            <div className="blogs" key={post.id}>
              <div className="blogsPost">
                <p className="postTitle">{post.title}</p>
                <p className="postbody">{post.body}</p>
              </div>
              {this.state.users.map(user => {
                if (user.id === userId) {
                  return (
                    <div key={user.id} className="blogsUsers">
                      <p>{user.name}</p>
                    </div>
                  );
                } else {
                  return null;
                }
              })}
            </div>
          );
        })}
      </div>
    );
  }
}

export default Content;
...