-1

Tô tentando pegar o id da URL, pra mostrar um post específico da API. Não posso usar componente de classe, porque useParams só funciona com funções. Eu tentei botar os dados dentro da variável post, mas não funcionou.

import { useParams } from "react-router-dom";
import axios from "axios";

const Post = () => {
    let params = useParams();
    let post = null;
    axios.get('https://jsonplaceholder.typicode.com/posts/' + params.post_id)
    .then(res => {
        post = res.data ? (
            <div>
                <h4>{res.data.title}</h4>
                <p>{res.data.body}</p>
            </div>
        ) : (
            <div>Loading post...</div>
        );
    });
    
    return (
        <div>{post}</div>
    )
}

export default Post

1 Resposta 1

0

Não está funcionando pois vocẽ não está utilizando um estado, e sim uma variável normal. Dessa forma o react não "sabe" que ele tem que reagir a mudança deste estado.

Utilize o useState para definir qual o estado inicial e a função de alterar este estado;

import { useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const Post = () => {
    let params = useParams();
    const [post, setPost] = useState(null);
    axios.get('https://jsonplaceholder.typicode.com/posts/' + params.post_id)
    .then(res => {
        setPost(res.data ?
        (
            <div>
                <h4>{res.data.title}</h4>
                <p>{res.data.body}</p>
            </div>
        )
        : 
        (<div>Loading post...</div>));
    });

    return (
        <div>{post}</div>
    )
}

export default Post

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .