0
votes

récupérer des données dans React avec DynamicRoutes, nextJS et useEffect

J'ai un lien de blog. Le lien est une route dynamique avec un identifiant de blog. C'est le wrapper Link de Next.

//page where link leads to
const ad = () =>{
    const router = useRouter()
    const {
        query: {blog},
    } = router

    const [data, setData] = useState(false);
    const [loading, setLoading] = useState(false);

               
    console.log('....outside useEffect log', blog)
      useEffect(()=>{
        console.log('useEffect consolelog', blog)
        axios.get('httpwww.blogapiadress.com/'+ ad)
            .then(response => setData(response.data))
            .then(setLoading(false))
    }, [])




     return( 
         
         <Container fluid className="padding0">
     /// data should be here.
   </Container>
    );
}

export default ad;

Maintenant, je veux transmettre "blog id" au composant et présenter les données dans une nouvelle page.

  //link
 <h3 className="blogTitle"><Link href="[blog]" as={props.item.postingId}>{props.item.title}</Link></h3>

problème, dans useEffect console.log('blog', blog) renvoie undefined, donc le routeur ne renvoie pas la valeur de la requête. Cependant, en dehors de useEffect, c'est le cas. Comment résoudre ce problème, je souhaite récupérer les données liées à la requête du routeur?

comme axios devient "indéfini" au lieu de l'identifiant du blog, j'obtiens 404.

reactjs axios next.js next

0 commentaires

3 Réponses :

0
votes

Vous cherchez une réponse pendant quelques heures, et quand j'ai posté la question sur la pile .. J'ai trouvé la réponse.

Le problème était donc que la requête est vide avec la prochaine génération statique au moment de la constructionhttps://nextjs.org/docs/api-reference/next/router#router-object

Je n'ai pas trouvé la meilleure solution, mais j'en ai trouvé une qui fonctionne. J'ai obtenu l'identifiant de blog de windows.location href

  useEffect(()=>{
    const last = window.location.href.split('/').pop();
    console.log('last', last)
    axios.get('https://blogpostings.com/'+last)
        .then(response => setData(response.data))
      }, [])

Je ne sais pas si c'est le bon ou le bon moyen, mais cela fonctionne. J'espère que quelqu'un trouvera cela utile.

0 commentaires

1
votes

Je ne pense pas que vous ayez besoin d'utiliser l'objet de fenêtre globale pour accéder aux données dynamiques liées à votre route - vous devriez pouvoir utiliser le routeur Next. Je pense que la façon dont vous définissez href - le seul accessoire requis pour Link pose des problèmes. En regardant les documents et votre exemple actuel, vous voudrez probablement utiliser quelque chose comme:

     import { useRouter } from 'next/router'

     const ad = () => {
        const router = useRouter()
        const { blog } = router.query

        const [data, setData] = useState(false);
        const [loading, setLoading] = useState(false);
               
        useEffect(()=>{
             axios.get('httpwww.blogapiadress.com/'+ blog)
                 .then(response => { 
                    setData(response.data)
                    setLoading(false)
              })
         }, [])


    if (loading || !data) return <div> Loading... </div>

    return( 
       <Container fluid className="padding0">
         /// Render data
      </Container>
    );
}

export default ad;

Ensuite, vous devriez être en mesure d'accéder correctement à [blog] (c'est-à-dire à votre postingId) en utilisant Router. Par exemple, si votre itinéraire a été défini de manière dynamique par /[blog].js , vous pouvez utiliser ce qui suit:

        <Link
          href={{
            pathname: '/[blog]',
            query: { blog: props.item.postingId },
          }}
        >
           <a>{props.item.title}</a>
        </Link>

     // or

     <Link href={`/${encodeURIComponent(props.item.postingId)}`}>
        <a>{props.item.title}</a>
    </Link>

0 commentaires

-1
votes

Si vous souhaitez obtenir le paramètre de requête à partir du lien, vous devez insérer à la fin de l'url: https://sample-link.com?blog=123

Ensuite, comme votre code ci-dessus:

blog: 123

Résultat:

import { useRouter } from 'next/router'

const router = useRouter()

const {
   query: {blog}
} = router;

console.log("blog: ", blog)

0 commentaires