React导入Citizenship子组件仅显示前端内容 后端API调用数据不展示

问题根因 #

• getStaticProps 是Next.js框架专属的页面生命周期方法，仅对pages目录下的页面级组件生效，定义在普通子组件中不会被自动执行，因此你写在citizenship.js中的接口请求逻辑从未运行，没有拿到后端返回的posts数据。
• 父组件App.js调用Citizenship组件时，没有传入posts属性，导致子组件接收的posts为undefined，列表渲染逻辑自然不会触发。

解决方案 #

可根据你的项目场景二选一：

方案1：App.js为pages目录下的页面组件 #

将getStaticProps逻辑迁移到App.js中，同时给子组件传入posts参数即可。
修改后的App.js代码：

import Citizenship from './citizenship'

export default function App({ posts }) {
  return (
    <div>
      <Citizenship posts={posts} />
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('http://localhost:1337/citizenships');
  const posts = await res.json();  
  
  return {
    props: {posts},
  }
}

删除citizenship.js中原来定义的getStaticProps代码，其余组件逻辑保留即可。

方案2：App.js为普通业务组件 #

直接在Citizenship组件内部通过useEffect+useState实现客户端数据请求，无需使用getStaticProps。
修改后的citizenship.js代码：

import { useState, useEffect } from 'react'

export default function Citizenship() {
  const [posts, setPosts] = useState([])

  // 组件挂载后请求后端数据
  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('http://localhost:1337/citizenships');
      const data = await res.json();
      setPosts(data)
    }
    fetchPosts()
  }, [])

  return (
    <>
      <div style={{textAlign:"center", marginTop:"20px", fontSize:"25px", color:"#0E2043", fontWeight: "500"}}>CITIZENSHIP</div>
        <div class="flexbox-container" style={{margin:"70px", marginTop:"0px"}}>
        {
          posts &&
          posts.map((post) => (
            <div style={{ padding: "40px" }}>

          <div class="citizen-item" key={post.id}>
          {console.log(post)}          
            <div className="container6">
              <img
                style={{ height: "100%", width: "100%", minHeight:"180px" }}
                src={`http://localhost:1337${post.Thumbnail.url}`}
                alt="公民项目缩略图"
              />
          </div>
        </div>        
          ))}
        </div>
    </>
  )
}

补充说明：img标签补充了alt属性，可避免控制台出现可访问性告警。

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