Tengo este proyecto para una perfumería. Tengo este componente CARD de un perfume.

Básicamente, me gustaría que el usuario haga clic en la tarjeta y genere un nuevo componente con todos los detalles de la tarjeta. Entonces, para eso paso a través de la ruta un parámetro de identificación.

 { state.map(c => ( <Grid item xs={4} sm={2} > <PerfumeCard key={c.id} perfume={c} /> <button className="myButton2"> <NavLink style={{ textDecoration: "none" }} to={{ pathname: '/home/myperfume/' + c.id, }}> Click here for details </NavLink></button> </Grid> )) }

hasta ahora no tengo problemas. en mi componente CARD DETAILS , uso useParams() para obtener la identificación y poder guardar el estado del perfume ya que estoy usando una tienda Redux .

 const params = useParams() const id = params.id; const [state, setState] = useState<any>('');

y recuperando el object :

 setState(store.getState().perfumeState.perfumes[id]);

Ahora, cuando verifico la depuración de mi console , veo que cuando uso console.log muestra la ID correcta, sin embargo, cuando console.log el estado real guardado al pasar la ID , obtengo un objeto diferente con una ID diferente.

digamos que hago clic en la tarjeta con id 1 .

Consola.log(id) = 1 ;

console.log(estado) = MyPerfume.tsx:29 {id: 2, name: 'Green Irish Tweed', type: 'EDT', gender: 'UNISEX', season: 'SUMMER', …}

como puede ver, me devuelven el objeto de id 2 por alguna razón

y cuando presiono la tarjeta con ID 2 , me devuelven el objeto con ID 5 , por ejemplo.

¿Qué causa este Comportamiento? Parece que no pude poner mis manos sobre el problema, sin embargo, sé que me estoy perdiendo algo.

¿Hay alguna forma mejor de obtener el objeto sin este problema?

Todavía nuevo en esto.

¡Gracias!