如何在一个组件中实现多个 API

Question

我陷入了一个项目，我必须在特定的 API 中实现 JSON Place Holder Post API and JSON Place Holder Comment API 两个 API 我的任务是构建一个像 facebook post 组件这样的项目，其中用户可以 post 和评论。我成功实施了 Post API，但我找不到任何使用评论 API 的解决方案。我做了所有事情，但它没有显示在我的 Home 组件中。我如何在我的主页组件

中实现评论api

我的控制台说它存在，但我无法显示它 这是Home.js文件

import React, { useEffect, useState } from 'react';
import Post from '../Post/Post';
import Comment from '../Comment/Comment';
import './Home.css';

const Home = () => {
const [post,setPost] = useState([]);
const [comment,setComment] = useState([]);


useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res=>res.json())
    .then(data=>setPost(data))

},[])

useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/comments')
    .then(res=>res.json())
    .then(data=>setComment(data))
},[])

return (
    <div>
        
        
        <div>
        {
            post.map(post=><Post post={post}></Post>)
            
        }
         
        </div>
       <div className="main-body">
       {
                comment.map(comment=><Comment comment={comment}></Comment>)
            }

       </div>
    </div>
);
};

export default Home;

这个comment.js文件

import React from 'react';

const Comment = (props) => {
const {name,email} = props.comment.name;
console.log(props.comment);
return (
    <div>
          {name}
          {email}
    </div>
);
};

export default Comment;

这是post.js文件

import React from 'react';
import './Post.css';

const Post = (props) => {

const {title,body} = props.post;
return (
    <div className="body-style">
        <h1 className="name">{title}</h1>
        <p>{body}</p>
    </div>
);
 };

export default Post;

请帮助我我需要解决方案

Answer 1

结构不正确，为了做到这一点，评论应该是 post 的子项，并且主页会将数据传递给 post。由于您从 2 个差异 API 中获取数据，因此您需要将其合并为 1 个源并将其向下传递。

Home.js

import React, { useEffect, useState } from 'react';
import Post from '../Post/Post';
import './Home.css';

const Home = () => {
const [post,setPost] = useState([]);
const [comment,setComment] = useState([]);
const [ info, setInfo ] = useState([]);


useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res=>res.json())
    .then(data=>setPost(data))

},[])

useEffect(()=>{
    fetch('https://jsonplaceholder.typicode.com/comments')
    .then(res=>res.json())
    .then(data=>setComment(data))
},[])

//Function to combine post and comment base on ID
const merge = (post, comment) => {
                const temp = [];
                post.forEach((x) => {
                    comment.forEach((y) => {
                        if (x.id === y.id) {
                            let cName = y.name;
                            let cEmail = y.email;
                            let cBody = y.body;
                            temp.push({ ...x, cName, cEmail, cBody });
                        }
                    });
                });
                return temp;
            };
      
useEffect(
        () => {     
            setInfo(merge(post, comment));
            console.log(info);
        },
        [ post, comment ]
    );
return (
    <div>
        {info.map((each) => <Post key={each.id} data={each} />)}
    </div>
);
};

export default Home;

Post.js

import React from 'react';
import Comment from './Comment';

const Post = (props) => {
    const { title, body, cEmail, cName } = props.data;
    return (
        <div className="body-style">
            <h1 className="name">{title}</h1>
            <p>{body}</p>
            <Comment email={cEmail} name={cName} />
        </div>
    );
};

export default Post;

Comment.js

import React from 'react';

const Comment = ({ name, email }) => {
    return (
        <div>
            {name}
            {email}
        </div>
    );
};

export default Comment;

如何在一个组件中实现多个 API

How to implement multiple API in one component

api

json

reactjs

jsonplaceholder