1
resposta

[Dúvida] Dados retornam duplicados - .map

Num projeto React, preciso adicionar elementos na página dinamicamente. Para isso, montei uma base de dados fictícia e usei o método map para percorrê-la, mas esse processo está me retornando os valores duplicados quando uso o concole.log para mapear o retorno dessa função. Podem me ajudar?

O código, a base de dados e o retorno do console está abaixo:

//Arquivo Data.js
export const data = [
  {
    id: 1,
    title: 'CURSO',
    description: 'lorem ipsum dolor',
    category: 'software development',
    duration: 20,
    expireDate: null,
    certified: true,
    url: 'https://www.udemy.com'
  },
  {
    id: 2,
    title: 'CURSO',
    description: 'lorem ipsum dolor',
    category: 'infra',
    duration: 20,
    expireDate: null,
    certified: true,
    url: 'https://www.udemy.com'
  },
  {
    id: 3,
    title: 'CURSO',
    description: 'lorem ipsum dolor',
    category: 'redes',
    duration: 20,
    expireDate: null,
    certified: true,
    url: 'https://www.udemy.com'
  }
]

//Arquivo index.js do componente Card
import { data } from '../../Data/Data.js'
function Card() {
  return (
    <div className='container'>
      {
        data.map(course => {
          console.log(course.id)
        })
      }
    </div>
  )
}
export default Card

//Arquivo App.js
import './App.css';
import Header from './components/Header'
import Card from './components/Card'

function App() {
  return (
    <div className="App">
      <Header />
        <Card />
    </div>
  );
}
export default App;

//Retorno no console
1
2
3
1
2
3
1 resposta

Oi, Gabryel! Tudo bem?

No seu arquivo index.js você está utilizando o <StrictMode />? É que as vezes essa renderização adicional acontece por conta disso. O React executa algumas rerenderizações adicionais neste modo. Verifique se é este o caso e se for não se preocupe que é bem normal acontecer.

Abraços!