J'ai suivi le guide officiel Next.js (Nextjs - Dynamic Routes) pour statiquement pages générées avec des routes dynamiques. Mais je ne peux pas générer de pages avec des données récupérées. J'obtiens l'erreur ci-dessous :

Erreur : valeur paths non valide renvoyée par getStaticProps dans /posts/[id]. paths doit être un tableau de chaînes ou d'objets de forme { paramètres : [clé : chaîne] : chaîne }

[id].js

import { getAllPostIds, getPostData } from '../../lib/posts'
export default function Post({ postData }) {
  return (
    <Layout>
      <h1>Post Page</h1>
      {postData.id}
    </Layout>
  )
}

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

Posts.js

Dans le code ci-dessous, pour simplifier les choses, j'ai récupéré des données codées en dur depuis l'API pour tester mon code.

import axios from 'axios'

export async function getAllPostIds() {
  const res = await axios('http://localhost:8000/api/posts/id=1')
  const posts = await res.data.results
  return posts.map(post => {
    return {
      params: {
        id: post.id
      }
    }
  })
}

export function getPostData(id) {
  return {
    id,
  }
}

Si j'enregistre ce que je reçois de getAllPostIds() avec le code ci-dessous, j'obtiens [ { params: { id: '1' } } ]. Ce qui semble exactement le même que l'exemple dans les docs officiels . Mais cela me donne l'erreur que j'ai mentionnée au début. Mais si j'ai codé en dur mon résultat enregistré, cela fonctionne parfaitement. Je ne sais tout simplement pas comment faire fonctionner cela avec des données API récupérées.

Enregistrement de ce que getAllPostIds() renvoie ([ { params: { id: '1' } } ])

export async function getStaticPaths() {
  const paths = getAllPostIds()
  paths.then(data => console.log(data))
  return {
    paths,
    fallback: false
  }
}

Le retour de getAllPostIds() du codage en dur. Fonctionne parfaitement. Pas d'erreur.

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths: [{
      params: {
        id: '1'
      }
    }],
    fallback: false
  }
}
0
stackyname 19 oct. 2020 à 15:30

1 réponse

Meilleure réponse
export async function getStaticPaths() {
    const paths = getAllPostIds()
    paths.then(data=>console.log(data))
    return {
      paths,
      fallback: false
    }
  }

Vous appelez path.then pour enregistrer les données. getAllPostIds() renvoie-t-il une promesse ? Lorsque je vérifie la fonction, cela ne semble pas le cas, mais si vous retournez une promesse, vous devez attendre tout l'appel avant de transmettre les données. Sinon, vous passez la promesse non résolue.

Attendez donc l'appel comme ceci :

export async function getStaticPaths() {
    const paths = await getAllPostIds()

    return {
      paths,
      fallback: false
    }
  }
1
tobzilla90 19 oct. 2020 à 14:20