Функция карты не отображает элементы - PullRequest
Новая
       65

Функция карты не отображает элементы

0 голосов
/ 17 июня 2020

Я начинаю с 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;

журнал консоли возвращает enter image description here Но функция карты не возвращает ни одного элемента или компонента.

1 Ответ

3 голосов
/ 17 июня 2020

добавить 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>
    </>))
}
...