React请求localhost接口后如何解构数组并渲染带key的子组件

核心改动说明 #

1. 用useState管理帖子数据：将接口返回的文档数组存入组件状态，才能在渲染阶段循环调用
2. 循环渲染Post组件：通过map遍历状态数组，用MongoDB文档自带的_id作为子组件的唯一key
3. 直接访问字段：通过解构语法，在父组件传递props时直接提取title等字段，或在子组件内部解构接收的post对象

修改后的完整代码 #

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

const Posts = () => {
  // 初始化状态存储帖子数组
  const [posts, setPosts] = useState([]);

  const getAllPost = async () => {
    try {
      const response = await fetch("http://localhost:5000/allposts", {
        method: "GET",
      });
      const data = await response.json();
      // 将接口返回的文档数组存入状态
      setPosts(data);
    } catch (error) {
      console.error("获取帖子失败:", error);
    }
  };

  useEffect(() => {
    getAllPost();
  }, []);

  return (
    <>
      <main className="main">
        <div className="container">
          <h4 className="heading">Posts</h4>
          {/* 循环渲染Post组件 */}
          {posts.map((post) => (
            <Post 
              key={post._id} // 使用MongoDB文档的唯一_id作为key
              title={post.title} // 直接传递title字段，子组件可直接访问props.title
              // 其他需要的字段也可在此传递，比如content={post.content}
            />
          ))}
        </div>
        <div className="sidebar">
          <h4 className="heading">Sidebar</h4>
          <Sidebar />
        </div>
      </main>
      <footer>
        <Footer />
      </footer>
    </>
  );
};

export default Posts;

子组件Post的优化（直接访问title） #

在Post组件中使用参数解构，直接拿到title字段：

// Post.jsx
const Post = ({ title }) => {
  // 直接使用title，无需嵌套路径
  return <div className="post">{title}</div>;
};

export default Post;

备选方案：传递整个post对象 #

如果需要传递多个字段，可直接把整个post对象传给子组件，再在子组件内部解构：

// 父组件中传递
<Post key={post._id} post={post} />

// 子组件中解构
const Post = ({ post }) => {
  const { title, content, author } = post;
  return (
    <div className="post">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Narayan Patel