Question

我是编码的新手，我正在构建博客应用程序。我正在使用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

Answer 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;

合并JsonPlaceholder中的两个Api

1 个答案: