求助：出现Cannot read properties of undefined (reading 'map')错误排查

第一个错误：数组定义方式错误 #

你在getCastDetails函数里用圆括号包裹多个对象，这是逗号表达式，只会返回最后一个对象，而不是你想要的数组。这直接导致后续.map方法无法调用（因为单个对象没有map方法）。

修复代码 #

把圆括号改成方括号，定义真正的数组：

export async function getCastDetails() {
    const members = [
      {
        id: "1",
        name: "name one"
      },
      {
        id: "2",
        name: "name two"
      },
      {
        id: "3",
        name: "name three"
      }
    ]
    return members;
}

第二个错误：getStaticProps使用场景错误 #

getStaticProps是Next.js的页面级数据获取方法，只有放在pages目录下的页面组件才会自动执行这个函数。你把它写在普通组件CastCarousel里，这个函数根本不会被触发，所以castData始终是undefined。

修复方案：把数据获取移到首页（页面组件） #

修改首页代码，在首页中调用getStaticProps获取数据，再把数据通过props传递给CastCarousel：

// 首页代码
import CastCarousel from "@/components/CastCarousel"
import { getCastDetails } from "@/lib/api";

export async function getStaticProps() {
    const castData = await getCastDetails();
    return {
        props: {
            castData,
        }
    }
}

const Cast = ({ castData }) => {
    return (
        <main>
            <div className="flex flex-col justify-center items-center h-screen">
                <div>
                    <h1
                        className="text-6xl relative"
                    >Explore The Guys</h1>
                </div>
                <div className="">
                    <CastCarousel castData={castData}/>
                </div>
            </div>
        </main>
    )
}

export default Cast

然后修改CastCarousel组件，移除无效的getStaticProps，只接收传入的props：

// CastCarousel组件代码
const CastCarousel = ({ castData }) => {
    console.log(castData);
    return (
        <div>
            {castData.map(member => (
                <div
                    key={member.id}
                >
                    <a>{member.name}</a>
                </div>
            ))}
        </div>
    )
}

export default CastCarousel

总结 #

1. 先修正数组定义，确保返回的是可遍历的数组。
2. 把数据获取逻辑移到页面组件（首页）中，通过props将数据传递给子组件。

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