@dry mauve por aqui mandalo todo
#juanjoseruinero problema react
graceful kestrel
dry mauve
data fija (imagen 1)
data de mi api (imagen 2)
Imagen que se muestra cuando uso la data fija (imagen 3)
Imagen que se muestra cuando uso mi api (imagen 4)
graceful kestrel
Creeria que es un problema de como estás renderizando la data, me podrías mostrar?
dry mauve
que te muestro?
graceful kestrel
Como renderizas la data que obtienes de la api
dry mauve
useEffect(() => {
fetch('http://localhost:3002/projects')
.then((response) => {
return response.json()
})
.then((ProjectsData) => {
setProductData(ProjectsData)
})
}, [])
graceful kestrel
nono, cuando la renderizas
osea la card con la data que traes de la api (la imagen 4)
dry mauve
graceful kestrel
y como es cuando renderizas la iamgen 3 ?
dry mauve
es igual
graceful kestrel
igual ?
dry mauve
exactamente igual
graceful kestrel
el current de donde sale ?
dry mauve
es que es un slider, que permite cambiar entre un array de imagenes
graceful kestrel
por que me parece raro, cuando hay varias proyectos como lo manejas ?
graceful kestrel
Intenta cambiar esto:
{
project.images.map((image, i) => (
<div
className={i === currents[index] ? "slide active" : "slide"}
key={i}
onClick={() =>
setCurrents((prevCurrents) => {
const newCurrents = [...prevCurrents];
newCurrents[index] = i;
return newCurrents;
})
}
>
{i === currents[index] && <img src={image} alt="" className="image" />}
</div>
));
}
por esto:
{
project.images.map((image, i) => {
console.log(image)
return (
<div
className={i === currents[index] ? "slide active" : "slide"}
key={i}
onClick={() =>
setCurrents((prevCurrents) => {
const newCurrents = [...prevCurrents];
newCurrents[index] = i;
return newCurrents;
})
}
>
{i === currents[index] && <img src={image} alt="" className="image" />}
</div>
);
});
}
y dime que te sale al hacer ese console.log
dry mauve
sale lo mismo con las 2
graceful kestrel
en el caso de la imagen 4
graceful kestrel
que lo renderizas desde tu api, no te carga la imagen, no?
dry mauve
la data fija es un copy paste del api
graceful kestrel
con las developer tools revisa si es que te esta cargando la imagen y si es que te está cargando el elemnto <img />
dry mauve
la imagen la carga pero no la muestra con el api a pesar de ser la misma data exacta