Nextjs Как объявить тип реквизита при прохождении?

#typescript #next.js

Вопрос:

Это моя страница

 import {
    InferGetServerSidePropsType,
    GetServerSideProps
} from 'next'
import ProductList from '../../component/product/ProductList'
export interface Item {
    title: string
    price: number
}
const products = ({
    data,
}: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    return (
        <div>
            <ProductList data={data} />
        </div>
    )
}
export const getServerSideProps:GetServerSideProps = async (context: any) => {
    let res = await fetch('/getAllProduct', {
        method: 'get',
    })
    const response: Array<Item> = await res.json()

    return {
        props: {
            data: response,
        },
    }
}
export default products
 

и это мой компонент списка продуктов

 import { Item } from '../../pages/products/index'
const ProductList = ({ data }: Array<Item>) => {
    const renderData = () => {
        return data.map((i,index) => {
            return <div key={index}>{i}</div>
        })
    }
    return <div></div>
}
export default ProductList
 

В моем компоненте списка продуктов я получил ошибку: данные свойств не существуют для элемента типа.

Что я упускаю ?

введите описание изображения здесь

Ответ №1:

Проблема в том, что вы пытаетесь уничтожить массив как объект.

Вам нужно изменить его на:

 const ProductList = ([ ...data ]: Array<Item>) => {
 

Тогда data будет иметь тип Item[]

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

1. спасибо, теперь у этой линии есть проблема <ProductList data={data} /> , знаешь почему ?

2. Похоже, что data здесь не массив, который он ожидает, а объект такого типа: { data: Array<Item> } . Таким образом, вы можете попробовать либо: <ProductList data={data.data} /> либо изменить свой getServerSideProps , чтобы просто вернуть response вместо того, чтобы упаковывать его в объект.