#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
вместо того, чтобы упаковывать его в объект.