reactjs - 无法在 nextjs 中传递 slug 值 getStaticpath 方法

Question

我创建了运行良好但无法构建的小型应用程序，显示错误修复 getStaticPaths，我将数据（http://localhost:3000/category/fashion/19）菜单传递给 category/[list]/[id].js，如何在 getStaticPaths 中获取时尚和 19 值。你能修复 getStaticPath 方法吗？我错过了什么。

看到这个 menu.js <Link href={"category"+"/" + x.store_name + "/"+ x.id }> menu.js

import React, { Component } from 'react'; 
import { Grid, Image } from "semantic-ui-react";
import Link from 'next/link';
export default class MenuApi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.menu,
      isLoading: true,
    };
  }
  render(){
    if (!this.state.data) {
      return null;
    }
   return (
    
         <Grid className="home-icon">
      
      <Grid.Row centered doubling columns={8} mobile>
        {this.state.data.map((x, i) => (
          <Grid.Column centered key={i} className="menu-category"> 
             
   <Link href={"category"+"/" + x.store_name + "/"+ x.id }>
              <Image src={x.image} alt=""/>
            </Link> 
            <Link href={x.category_url}>
              <p >{x.store_name}</p>
            </Link>
          </Grid.Column>
        ))}
      </Grid.Row>
    </Grid>
    
   )
 }
} 

类别/[列表]/[id].js

import { useRouter } from 'next/router'
import Head from 'next/head'
import { Grid, Image,Segment, Card } from "semantic-ui-react" 
import 'semantic-ui-css/semantic.min.css' 

const PostNew = () => {
  const router = useRouter()
  const { list } = router.query
  console.log(router.query.id)
  return <p>Post: </p>
}
const Post = () => {
    const router = useRouter()
    const { list } = router.query
    console.log(router.query.id)
    return(
        <> 
          <Grid className="store-list">
            <Grid.Column width={16}>
              <p>
                <span>asasas</span>
              </p>
            </Grid.Column>
          </Grid>
          <Grid columns={4} className="all-offers storeList">
            {props.category_list.map((x) => {
              return (
                <Grid.Column>
                  <Segment>
                    <Card>
                      <a href  ={x.store_url}>
                        {" "}
                        <Image
                          src={x.image}
                          alt=""
                          className="collection-img"
                        ></Image>
                      </a>
                      <Card.Content>
                        <a href  ={x.store_url}>
                          {" "}
                          <Card.Header>{x.name}</Card.Header>
                        </a>
                        <Card.Description>{x.store_summary}</Card.Description>
                      </Card.Content>
                      <Card.Content extra>
                        <p className="rewards">
                          <span>
                            <img src="/images/rewards.png" alt=""></img>
                          </span>
                          Cash rewards upto <span>AED {x.cashback}</span>
                        </p>
                        <p className="location">
                          <span>
                            <img src="/images/location.png" alt=""></img>
                          </span>
                          <span className="store-location" key="index">{x.store_branches}</span>
                          {/* {x.store_branches.map((locations, index) => (
                            <span className="store-location">
                              {index === 0 ? (
                                <span>{locations.store_location}</span>
                              ) : index >= 1 ? (
                                <span>
                                  ,&nbsp;&nbsp;{locations.store_location}
                                </span>
                              ) : null}
                            </span>
                          ))} */}
                        </p>
                      </Card.Content>
                    </Card>
                  </Segment>
                </Grid.Column>
              );
            })}
          </Grid>  
        </>
    
      )
  }
  export async function getStaticPaths() {
    const posts = PostNew(["id"]);
  
    return {
      paths: posts.map((posts) => {
        return {
          params: {
            list: post.query.list,
            id: post.query.id,
          },
        };
      }),
      fallback: false,
    };
  };
  export async function getStaticProps(context) {
    const id = context.params.id;
    const postBody = {
      category_id: id,
      offer_type: "",
    };
    const offerList = await fetch('https://len.app.ae/api/v5/web/list',{
      method:'POST',
      body: JSON.stringify(postBody),
      headers: { "Content-Type": "application/json" },
    })
    const category = await offerList.json();
      // const bookJson = JSON.stringify(book)
      // const bookJson=offerData.stores;
    const category_list=category.stores;
    const category_title=category;
    return {
      props: {
        category_list,
        category_title
      }
    };
  }
export default Post

标签： reactjsnext.js