Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Usuário: imagem e nome não estão sendo

Referente ao curso React: configurando e estruturando projetos com Vite, no capítulo Criando requisições e atividade Posicionando os cards

por Stefani Weber
| 180k xp | 25 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código no arquivo index.jsx:


import Code from "./assets/code.svg";
import Share from "./assets/share.svg";
import Chat from "./assets/chat.svg";
import "./styles.css";

export default function Cards({
  id,
  imagemUrl,
  titulo,
  resumo,
  linhasDeCodigo,
  compartilhamentos,
  comentarios,
  usuario,
}) {
  return (
    <article className="cards">
      <div className="cards__imagem">
        <img src={imagemUrl} alt="Imagem do post" />
      </div>

      <div className="cards__conteudo">
        <div className="conteudo__texto">
          <h3>{titulo}</h3>
          <p>{resumo}</p>
        </div>

        <div className="conteudo__rodape">
          <ul>
            <li>
              <img src={Code} alt="códigos" />
              {linhasDeCodigo}
            </li>
            <li>
              <img src={Share} alt="compartilhamentos" />
              {compartilhamentos}
            </li>
            <li>
              <img src={Chat} alt="comentários" />
              {comentarios}
            </li>
          </ul>

          <div className="rodape__usuario">
            <img src={usuario ? usuario.imagem : ""} alt="Imagem do usuário" />
            <a className="usuario__link" href="#">
              {usuario ? usuario.nome : ""}
            </a>
          </div>
        </div>
      </div>
    </article>
  );
}
2 respostas
por Renan Lima
| 3620.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Stefani.

Tudo bem?

Uma possível causa para esse problema pode ser a forma como as propriedades estão sendo passadas para o componente Cards. Vamos verificar algumas coisas:

1. Certifique-se de que as propriedades imagemUrl e usuario estão sendo passadas corretamente para o componente Cards no momento da sua utilização em "App.jsx". Por exemplo, se você está renderizando o componente Cards em algum lugar, você deve passar as propriedades assim:

<Cards
                id={item.id}
                imagemUrl={item.imagem_capa}
                titulo={item.titulo}
                resumo={item.resumo}
                linhasDeCodigo={item.linhas_de_codigo}
                compartilhamentos={item.compartilhamentos}
                comentarios={item.comentarios}
                usuario={item.usuario}
              />

2. Verifique também se não há erros de digitação ou nomes de classes CSS que não correspondem entre o seu arquivo de estilos e o JSX.

Se após verificar esses pontos o problema persistir, recomendo que você inspecione o elemento no navegador para ver se as imagens estão sendo carregadas e se há algum erro no console que possa indicar o que está acontecendo.

Qualquer coisa compartilha os códigos completos dos seus arquivos, dos componentes.

Espero ter ajudado e bons estudos!

solução!
por Stefani Weber
| 180k xp | 25 posts

Oi, Renan, obrigada pela resposta aqui. Eu já tinha solucionado e esqueci de fechar o tópico.

A solução que deu certo para mim foi passar na função como um parâmetro o que eu gostaria de utilizar, então fiz um import PropTypes from "prop-types" no topo do componente, e abaixo, fora do escopo da função criei a lista de proptypes que seria utilizada!

Também é possível ignorar os props usando o comentário /* eslint-disable react/prop-types */ no topo do componente que está alertando os problemas. Pois esse conflito acaba acontecendo pelo Lint que acusa o uso não declarado dos props no react.

Baixei o pacote de proptypes pelo terminal, mas precisei baixar exatamente por conta dos conflitos com o Lint. Caso mais alguém acabe tendo esse problema futuramente, é uma boa tentar resolver assim! =D