合并来自 JsonPlaceholder 的两个 Api答案

【问题标题】：Merge Two Api's from JsonPlaceholder合并来自 JsonPlaceholder 的两个 Api
【发布时间】：2019-09-20 03:11:09
【问题描述】：

我是编码新手，正在构建博客应用程序。我正在使用 axios 对 Jsonplaceholder 进行 api 调用。我正在尝试映射一个呈现标题、描述和名称的 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

【问题讨论】：

能否提供console.log的内容或错误信息？
对象作为 React 子级无效（发现：对象带有键 {id, name, username, email, address, phone, website, company}）。如果您打算渲染一组子项，请改用数组。在 div（在 Content.js:31）在 div（在 Content.js:29）在 Content（在 Homepage.js:12）在 div（在 Homepage.js:10）在 Unknown（由 Context.Consumer 创建）在div（在 App.js:10）中的路由（在 App.js:11）

标签： javascript node.js reactjs express axios

【解决方案1】：

我不确定您是否想找到发布博客内容和渲染的用户，但我想这将是您的解决方案。

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;

【讨论】：