Next.js中getStaticProps获取的数据无法传递给子组件问题排查

错误原因 #

• 子组件中将整个props对象赋值给了gyms状态，而父组件传递的健身房列表实际存放在props.gyms字段下，普通对象本身没有map方法，因此触发类型错误
• 子组件返回的JSX没有包裹根元素，会额外触发语法错误
• 可选优化点：如果子组件不需要修改健身房列表数据，无需使用useState存储props数据，直接使用传入的props即可

修复方案 #

方案1：无需在子组件修改数据（推荐） #

直接解构获取props中的gyms字段，不需要额外定义state：

export default function Table({ gyms }) {
   return (
     <> {/* 用React Fragment包裹根元素 */}
      {gyms?.map((gym, index) => (
        <p key={index}> {gym.name} </p> {/* 遍历元素添加key属性避免React警告 */}
      ))}
     </>
   );
}

方案2：需要在子组件修改gyms数据 #

初始化state时取props.gyms而非整个props对象：

import { useState } from 'react'
export default function Table(props) {
   // 从props中取出gyms字段初始化状态
   const [gyms, setGyms] = useState(props.gyms);

   return (
     <>
      {gyms?.map((gym, index) => (
        <p key={index}> {gym.name} </p>
      ))}
     </>
   );
}

内容的提问来源于stack exchange，提问作者Ala Ben Aicha