地图功能不渲染元素

Question

我从 Next.js 开始，我正在尝试从 CMS 呈现一些数据。我可以访问地图函数中的数据，但我不能在其中渲染任何元素。这是我的 index.tsx

type OpenJobsProps = {
    slug: string,
    image: string
}

const JoinUs = ({ jobs }: InferGetStaticPropsType<typeof getStaticProps>) => {
    return(
        <Layout>
            <Welcome>
                <h1>Join us</h1>
                <p>It’s designed to appeal to emotions, in order to<br/> achieve rational goals. The concept doesn’t make<br /> logical sense at first.</p>
            </Welcome>
            <OpenJobs>
                {jobs.data.map((item: any, index: number) => {
                    {console.log(item)}
                    <>
                        <OpenJobItem slug={item.slug} source={item.image}/> 
                        <p>{item.slug}</p>
                    </>
                })}
            </OpenJobs>
            <Culture/>
        </Layout>
    )
}

export const getStaticProps: GetStaticProps = async (ctx) => {
    const jobs: OpenJobsProps[] = (await getAllOpenJobs() || [])

    return {
      props: {
        jobs,
      }
    }
  }

export default JoinUs;

控制台日志返回 但 map 函数不返回任何元素或组件。

Answer 1

添加return

{jobs.data.map((item: any, index: number) => {
    console.log(item);
    return (<>
        <OpenJobItem slug={item.slug} source={item.image}/> 
        <p>{item.slug}</p>
    </>);
})}

或者只是：

{
    jobs.data.map((item: any, index: number) => (<>
        <OpenJobItem slug={item.slug} source={item.image} />
        <p>{item.slug}</p>
    </>))
}