如何在反应中获取嵌套数据

Question

关于在反应中获取嵌套数据的问题。

蜜蜂

1. https://jsonplaceholder.typicode.com/posts
2. https://jsonplaceholder.typicode.com/posts/${postId}/comments

能够获取帖子列表。 现在想从点击帖子时获取评论列表

这是到目前为止的代码

import React, { useEffect, useState } from "react";
import Post from "./Post";

const [posts, setPosts] = useState([]);
const [comments, setComments] = useState([]);

function App() {
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);

useEffect(() => {
  const loadposts = async() => {
    const resp = await fetch("https://jsonplaceholder.typicode.com/posts?userId=1");
    const data = await resp.json();
    setPosts(data);
  }
  loadposts();
}, []);

return (
  <div className="App">
    <ul>
      {posts.map((post) => 
      (
        <div>
          <li key={post.id}>
            <Post 
            userId={post.id}
            title={post.title} 
            body={post.body} 
            />
          </li>
      </div>
      ))
      }
    </ul>
  </div>
);
}

export default App;

function Post({title, body, postId}) {
  
  return (
      <div>
          <h5>{postId}</h5>
          <h1>{title}</h1>
          <p>{body}</p>
      </div>
  )
}

export default Post

感谢任何帮助。 谢谢

Answer 1

首先，“/posts”端点返回用户的帖子，因此查询“/posts?userId=1”将返回用户 id 为1的所有帖子。 您错误地将userId道具传递给Post组件，而不是特定帖子的id ，即

<Post userId={post.id} title={post.title}  body={post.body} />

React 键也应该放在被映射的最外层元素上，在你的例子中是div ，但是由于li已经是一个块级元素，所以div基本上是无关的。

<ul>
  {posts.map((post) => (
    <li key={post.id}> // <-- remove div and place React key on li
      <Post
        postId={post.id} // <-- pass the post's id
        title={post.title}
        body={post.body}
      />
    </li>
  ))}
</ul>

在Post组件中创建一个获取评论实用程序和单击处理程序，并将单击处理程序附加到标题 header。 有条件地呈现评论。 如果还不清楚，您会将comments state 移动到Posts中，以便每个帖子组件维护自己的副本。 以下是渲染获取评论的示例，您可以使用您选择的任何条件渲染和字段子集。

const fetchComments = async (postId) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}/comments`
  );
  return response.json();
};

function Post({ title, body, postId }) {
  const [comments, setComments] = useState([]);

  const clickHandler = () => {
    fetchComments(postId).then(setComments);
  };

  return (
    <div>
      <h5>{postId}</h5>
      <h1 onClick={clickHandler}>{title}</h1>
      <p>{body}</p>
      {comments.length && (
        <>
          Comments:
          <ul>
            {comments.map(({ id, email, name, body }) => (
              <li key={id}>
                <dl>
                  <dt>{email} - {name}</dt>
                  <dd>{body}</dd>
                </dl>
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
}

Answer 2

如果有人在寻找工作解决方案

function Post() {
const {id} = useParams();
const [comments, setComments] = useState([]);

useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}/comments`)
    .then((res) => res.json())
    .then(setComments)
    .catch((error) => {
        console.log(error)
    })
    console.log("setComments: ", setComments)
}, [])

    return (
        <div>
            {comments && comments.map((comment) => (
                <div key={comment.id}>
                    <p>{comment.body}</p>
                </div>

            ))}

        </div>
    )
}
export default Post

then update rendering 

    <div className="App">
      <Switch>
     <Route exact path='/'>
        {posts.map((post) => (
         <article key={post.id}> 
          <h1>{post.title}</h1>
            <Link to ={`/${post.id}`}>
              <p>{post.body}</p>
            </Link>
       </article>
      ))}
   </Route>

     <Route path ='/:id'>
        <Post/>
     </Route>
   </Switch>

  </div>