Javascript 如何在react中获取嵌套数据

有关获取react中嵌套数据的问题

原料药

能够获取帖子列表。现在，您想在单击post时从中获取评论列表吗

这里是到目前为止的代码

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

import React，{useffect，useState}来自“React”；
从“/Post”导入Post；
const[posts，setPosts]=useState（[]）；
const[comments，setComments]=useState（[]）；
函数App（）{
const[posts，setPosts]=useState（[]）；
const[comments，setComments]=useState（[]）；
useffect（（）=>{
const loadposts=async（）=>{
const resp=等待获取（“https://jsonplaceholder.typicode.com/posts?userId=1");
const data=wait resp.json（）；
设置柱（数据）；
}
装载柱（）；
}, []);
返回(

{posts.map（（post）=>
(


))
}

);
}
导出默认应用程序；
职能职位（{title，body，postId}）{
返回(
{postId}
{title}
{body}

)
}
导出默认帖子

谢谢你的帮助。谢谢

首先，“/posts”端点按用户返回帖子，因此查询“/posts？userId=1”将按用户id

1

返回所有帖子。您错误地将

userId

道具传递给

Post

组件，而不是特定Post的

id

，即

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

在

Post

组件中，创建一个fetchcomments实用程序并单击处理程序，然后将单击处理程序附加到标题标题标题。有条件地呈现注释。如果还不清楚，则将

注释

状态移动到

帖子

，以便每个帖子组件都维护自己的副本。下面是一个渲染注释的示例，一旦获取注释，您可以使用您选择的任何条件渲染和字段子集

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>
  );
}

const fetchComments=async（postId）=>{
const response=等待获取(
`https://jsonplaceholder.typicode.com/posts/${postId}/评论`
);
返回response.json（）；
};
职能职位（{title，body，postId}）{
const[comments，setComments]=useState（[]）；
常量clickHandler=（）=>{
fetchComments（postId）。然后（setComments）；
};
返回(
{postId}
{title}
{body}

{comments.length&&(
评论：

{comments.map（{id，email，name，body}）=>(

{email}-{name}
{body}

))}

)}
);
}

首先，“/posts”端点按用户返回帖子，因此查询“/posts？userId=1”将按用户id

1

返回所有帖子。您错误地将

userId

道具传递给

Post

组件，而不是特定Post的

id

，即

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

在

Post

组件中，创建一个fetchcomments实用程序并单击处理程序，然后将单击处理程序附加到标题标题标题。有条件地呈现注释。如果还不清楚，则将

注释

状态移动到

帖子

，以便每个帖子组件都维护自己的副本。下面是一个渲染注释的示例，一旦获取注释，您可以使用您选择的任何条件渲染和字段子集

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>
  );
}

const fetchComments=async（postId）=>{
const response=等待获取(
`https://jsonplaceholder.typicode.com/posts/${postId}/评论`
);
返回response.json（）；
};
职能职位（{title，body，postId}）{
const[comments，setComments]=useState（[]）；
常量clickHandler=（）=>{
fetchComments（postId）。然后（setComments）；
};
返回(
{postId}
{title}
{body}

{comments.length&&(
评论：

{comments.map（{id，email，name，body}）=>(

{email}-{name}
{body}

))}

)}
);
}

---

因此，您有了通过post id获取注释的API端点，以及一个子

post

组件和

postId

prop。您是否尝试过使用特定数据向端点发出请求？您希望或需要在何时获取每篇帖子的评论？@Drew Reese。。谢谢你回来。当我点击帖子标题时，我添加了获取带有给定{post id}的评论的请求，但它没有返回任何东西，告诉我们您尝试了什么。这里没有显示任何onClick代码。单击什么以及在哪里？@drewrese我想在单击post时显示所选的post获取评论中的数据。我在currentpostId==post.id的情况下添加了标题函数上的handleclick。但是它没有做任何事情，所以你有一个API端点，可以通过post id和一个子

post

组件和

postId

prop获取注释。您是否尝试过使用特定数据向端点发出请求？您希望或需要在何时获取每篇帖子的评论？@Drew Reese。。谢谢你回来。当我点击帖子标题时，我添加了获取带有给定{post id}的评论的请求，但它没有返回任何东西，告诉我们您尝试了什么。这里没有显示任何onClick代码。单击什么以及在哪里？@drewrese我想在单击post时显示所选的post获取评论中的数据。我在currentpostId==post.id的情况下添加了标题函数上的handleclick。但事实并非如此anything@DrewReese..thank你是这样much@DrewReese..thank非常感谢你