0

我正在尝试对 dnamy 页面进行 SSR，但它不起作用。getInitialProps 方法中的 props 和查询参数始终为空，我无法理解这怎么可能。

下面的代码属于位于 pages/products/[id].tsx 中的文件。当我直接访问一个 url 或者我使用这样的链接访问它时：

<Link href="/products/[id]" as={`/products/${this.state.item.id}`}>

什么都没发生。有人可以解释一下这种行为的来源吗？

import { Component } from "react";
import { useRouter } from 'next/router';
import { Article } from "../../interfaces/article.interface";
import { OverviewItem } from "../../components/shop/overview/overview-item/overview-item";

interface ProductItemPageProps {
    item: Article
    other: Article[];
}

const ProductItemPage = (props: ProductItemPageProps) => {
    console.log(props);  
    const router = useRouter()

    return (
        <div>
            <OverviewItem item={props.item}></OverviewItem>
    <p>TTest</p>
        </div>
    )
}

ProductItemPage.getInitialProps = async ({query}) => {
    console.log("ProductItemPage getInitialprops");
    const { id } = query;
    const graphqlQuery = {
        query: `{article(id:${id}) {id name image price} articles(last:3) {id name image price}}`
    };
    const stringifiedQuery = JSON.stringify(graphqlQuery);
    console.log('Query', stringifiedQuery);
    const res = await fetch(`http://localhost:8888/graphql`, {
        method: 'POST',
        mode: 'cors',
        body: stringifiedQuery
    });
    const arr = [];
    var item = {}
    var other = [];
    try {
        const data = await res.json();
        item = data.data.article;
        other = data.data.articles;
        console.log("AAAAAA", data);
    } catch (exception) {
        console.log("Error", exception);
        item = {
            "aaaah": "AAAAAAAAASDASD" // EVEN THIS DOESN'T SHOW IN PROPS
        };
    }
    return {
        item,
        other
    }
}

export default ProductItemPage;
4

0 回答 0