Entrar Ainda não tem acesso?
1
resposta

Parametros não estão sendo reconhecido

Referente ao curso React: desenvolvendo em React Router com JavaScript

por Andressa Oliveira
| 431.4k xp | 32 posts
Gerente de Tenologia e Inovação

Boa tarde. Estou na aula sobre useParams. No meu projeto esta ne retornando erros e nao consigo resolve-los. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

import { Link } from "react-router-dom";
import styles from "./PostCard.module.css";

export default function PostCard({ post }) {

  return (
      <Link to={`/posts/${post.id}`}>
          <div className={styles.post}>
              <img
                  className={styles.capa}
                  src={`/assets/posts/${post.id}/capa.png`}
                  alt="Imagem de capa do post"
              />

              <h2 className={styles.titulo}>{post.titulo}</h2>

              <button className={styles.botaoLer}>Ler</button>
          </div>
      </Link>
  )
}
1 resposta
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team Intrutor e Desenvolvedor de Software

Oi, Andressa, tudo bem? Nos desculpe a demora a responder.

O erro que está aparecendo para você é o seguinte:

TypeError: cannot read properties of undefined (reading 'id')

at PostCard (index.js:7:1)

Traduzindo do inglês, esse erro diz que não é possível ler propriedades de undefined no arquivo PostCard, na linha 7. Na linha 7 do seu arquivo, você utiliza a variável post.id. O erro está dizendo que o valor de post é undefined. Ou seja, o componente PostCard não recebeu esse prop corretamente.

Então devemos conferir qual componente que está passando essa prop para o PostCard. No nosso projeto, o componente Inicio está utilizando o PostCard e passando props para ele com o seguinte código:

import styles from './Inicio.module.css';

import posts from 'json/posts.json';
import PostCard from "componentes/PostCard";

export default function Inicio() {
    return (
        <ul className={styles.posts}>
            {posts.map((post) => (
                <li key={post.id}>
                    <PostCard post={post} />
                </li>
            ))}
        </ul>
    )
}

Note que escrevemos <PostCard post={post} />. O nome da prop deve ser exatamente post (lado esquerdo do sinal de igual =), caso contrário, a prop post dentro dentro do arquivo PostCard.js realmente será undefined.

Se não for esse o problema, pode mandar o código do seu componente Inicio? Fico no aguardo!