【问题标题】:Next.js getStaticPathsNext.js 获取静态路径
【发布时间】:2020-07-03 23:18:52
【问题描述】:

我的“getStaticPaths”函数有问题。 当我尝试使用参数获取动态显示时,它显示为错误:在 getStaticPaths for / movies / [id] strong> 但如果我使用上面的其他方式,它会起作用。最重要的是,我是文档。

import fetch from 'node-fetch';


function MovieSelect({movie}){

    return(
        <div>
            <h1>Test: {movie.name}</h1>
            <p>{movie.summary.replace(/<[/]?[pb]>/g, '')}</p>
            {movie.image ? <img src={movie.image.medium} /> : null}
        </div>
    )
}

export async function getStaticPaths(){
    const request  = await fetch('https://api.tvmaze.com/search/shows?q=batman')
    const movies = await request.json()

    //const paths = movies.map(movie =>`/movies/${movie.show.id}`)

    const paths = movies.map(movie =>({
        params: {id: movie.show.id},
    }))

    return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({params}){
    const request = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
    const movie = await request.json()

    return{
        props:{
            movie
        }
    }
}

export default MovieSelect

【问题讨论】:

    标签: reactjs api next.js


    【解决方案1】:

    在 getStaticPaths for / movies / [id]

    中没有提供必需参数 (id) 作为 字符串

    id 应该是错误提示的字符串。从浏览器点击 api 后,您可以看到 id 不是字符串而是数字。您需要将其转换为字符串。

    params: {id: movie.show.id.toString()},
    

    【讨论】:

    • 为什么 Next 要求它是一个字符串?
    猜你喜欢
    • 2020-12-27
    • 2022-07-29
    • 1970-01-01
    • 2021-08-29
    • 2022-06-23
    • 2022-01-04
    • 1970-01-01
    • 2021-07-11
    • 1970-01-01
    相关资源
    最近更新 更多