Блог

Главная - Вопросы по программированию - Как использовать полученные данные с Next.js а машинопись?

Как использовать полученные данные с Next.js а машинопись?

#typescript #next.js #fetch-api

Вопрос:

Я новичок в Next.js и машинописный текст. Я пытаюсь map() получить данные из JsonPlaceholder

Мой getStaticProps :

 export const getStaticProps: GetStaticProps = async () => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
    const data = await res.json()
    return {
        props: { auth0Data: data },
    }
}

Моя следующая страница:

 interface Auth0DataProps {
    id: number,
    name: string,
    username: string,
}

type Props = {
    auth0Data: Auth0DataProps
}

const Dashboard: NextPage<{ auth0Data: Props }> = ({ auth0Data }) => {
    console.log(auth0Data) // logs the data as an object
    return (
        <LayoutComponent title="User profile">
          {auth0Data.map(data=> ( // I GET AN ERROR
            ...
           )
        )
 }

Ошибка, которую я получаю:

Свойство «карта» не существует для типа «Реквизит»

Комментарии:

1. Какую ошибку вы получаете? map является методом массива, если auth0Data это объект, он не будет работать с ним.

2. Данные отображаются в браузере, но в машинописном тексте написано другое: Property 'map' does not exist on type 'Props' и данные, которые я получаю, — это данные ie — Parameter 'data' implicitly has an 'any' type.

3. Ах, так это ошибка машинописного текста, которую вы получаете. Это потому, что вы печатаете auth0Data неправильно.

Ответ №1:

Если данные, которые вы передаете через auth0Data prop , являются массивом, то вы вводите Dashboard компонент неправильно — auth0Data это должен быть массив Auth0DataProps , и NextPage Props тип должен быть общим.

 type Props = {
    auth0Data: Auth0DataProps[]
}

const Dashboard: NextPage<Props> = ({ auth0Data }) => {
    // Remaining code
}

Комментарии:

1. Данные должны поступать в виде объекта, похожего на массив, поэтому я могу перебирать данные, и они отображаются в браузере, поэтому проблема заключается в моей реализации : auth0Data.map(data => <p key={data.id}>{data.name}</p>

2. Вы также изменили Dashboard тип компонента на NextPage<Props> ? Похоже, вы пропустили это из своего фрагмента.

3. да, я сменил реквизит, но все равно получаю тот же снимок экрана

Ответ №2:

Наиболее распространенной ошибкой является неправильная интерпретация полученных вами данных. И, насколько я вижу, вы получаете объект со своего сервера, что означает, что вы не можете использовать array.map() функцию (MDN).

Typescript не может вам в этом помочь, так как он интерпретирует ваш код не во время выполнения, а во время компиляции. В результате вы должны убедиться, что полученные данные соответствуют указанным типам.

Метки: