Next.js+TypeScript中如何向自定义组件传递数组数据？

• TripsComponent的参数定义不符合React组件规范：React组件接收的是props对象，而非直接传入数组类型。当前写法(data: Trip[])会导致props被错误解析，同时传递的数据结构也不匹配。
• TripsPage中通过getStaticProps返回的data是一个包含data数组的对象（从console输出可看出），但你直接把整个对象传给了TripsComponent，而组件期望的是Trip[]类型的数组。

方案一：规范组件props定义（推荐） #

修改TripsComponent的参数，让它接收标准的props对象，同时调整页面中传递的参数：

1. 调整TripsComponent代码：

import { Trip } from '../components/models'

// 定义组件的props类型
type TripsComponentProps = {
  trips: Trip[];
}

export const TripsComponent = ({ trips }: TripsComponentProps) => {
    return (
        <div>
            <h1>Your Trips</h1>
            <div>
                {trips.map((trip: Trip) => (
                    <div key={trip.id} className="card"> {/* 添加唯一key属性，避免React警告 */}
                        <h3>{trip.name}</h3>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

2. 修改TripsPage的组件传参部分：

const TripsPage: NextPage = (data: InferGetStaticPropsType<typeof getStaticProps>) => {
    console.log(data)
    return (
        <div className="container">
            {/* 传递对象中的data数组，用trips命名更语义化 */}
            <TripsComponent trips={data.data} />
        </div>
    )
}

方案二：直接传递数组（简化写法） #

如果希望组件直接接收数组作为props，可以调整组件的参数解析方式，并修正页面传递的参数：

1. 修改TripsComponent代码：

import { Trip } from '../components/models'

// 直接解构props中的data数组
export const TripsComponent = ({ data }: { data: Trip[] }) => {
    return (
        <div>
            <h1>Your Trips</h1>
            <div>
                {data.map((trip: Trip) => (
                    <div key={trip.id} className="card"> {/* 添加唯一key属性 */}
                        <h3>{trip.name}</h3>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default TripsComponent

2. 修改TripsPage的组件传参部分：

const TripsPage: NextPage = (data: InferGetStaticPropsType<typeof getStaticProps>) => {
    console.log(data)
    return (
        <div className="container">
            {/* 传递对象中的data数组 */}
            <TripsComponent data={data.data} />
        </div>
    )
}

• 循环渲染元素时必须添加唯一的key属性（比如使用trip.id），这是React的强制要求，可避免渲染警告和性能问题。
• 从你的console输出可以确认，data.data确实是Trip[]类型的数组，符合组件的类型要求。

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