Задать вопрос
@GNG999

Как на Next Js на серверных компонентах получать данные?

Читаю вот тут как получать данные с серверного компонента Next Js

мой компонент

import classNames from "classnames/bind";
import style from './style.module.scss'
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";



const cn = classNames.bind(style)

const getData =async ()=>{
     const response = await fetch("http://localhost:9000/api/cart/qty" )
     const qty = await response.json()
}


export default  async function  MainPage()  {
const data = await getData()
return (<div className={cn('main-page')}>
        <div className={cn('title-section')}>
            <div className={cn('title')}>
                <p>
                    Уникальные изделия кубачинских мстеров
                </p>
                {/*{qty.qty}*/}
            </div>
        </div>
        <div className={cn('features')}>
            <div className={cn('item')}>
                <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Индивидуальный подход</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Доставка по всей России</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>300+ изделий</span>
            </div>
            <div className={cn('item')}>
                <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50}/>
                <span>Наш магазин открыт с 2003 года</span>
            </div>
        </div>
        <div className={cn('products-catalog')}>
            {[1,2,3,4,5,6,7,8,9,10,11,12].map((el)=><Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`}><ProductItem /></Link>)}
        </div>
    </div>)
}

Данный код вызывает ошибку

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.


Как это поправить ?
Ошибка падает именно когда я делаю компонент MainPage асинхронным export default async function MainPage()
  • Вопрос задан
  • 82 просмотра
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
grantur5707
@grantur5707
Full Stack Web Developer
У тебя getData() возвращает промис и ты его пытаешься зарендерить в jsx, из-за чего получаешь ошибку

Вот так должно быть:

import classNames from "classnames/bind";
import style from './style.module.scss'
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";

const cn = classNames.bind(style)

const getData = async () => {
    const response = await fetch("http://localhost:9000/api/cart/qty");
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    return await response.json();
}

export default async function MainPage() {
    const data = await getData();

    return (
        <div className={cn('main-page')}>
            <div className={cn('title-section')}>
                <div className={cn('title')}>
                    <p>
                        Уникальные изделия кубачинских мастеров
                    </p>
                    {/* Используем полученные данные */}
                    <p>{data.qty}</p>
                </div>
            </div>
            <div className={cn('features')}>
                <div className={cn('item')}>
                    <Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Индивидуальный подход</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Доставка по всей России</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>300+ изделий</span>
                </div>
                <div className={cn('item')}>
                    <Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50} />
                    <span>Наш магазин открыт с 2003 года</span>
                </div>
            </div>
            <div className={cn('products-catalog')}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((el) => (
                    <Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`} key={el}>
                        <ProductItem />
                    </Link>
                ))}
            </div>
        </div>
    )
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы