Actualmente estoy creando una aplicación web de refugio con mern stack y tengo problemas para mostrar una imagen de mi objeto. Ya usé el mapa, pero creo que es solo para objetos de matriz. así que no tengo idea de cómo obtener las imágenes.url en mi objeto animal.
este es mi esquema animal
const mongoose = require('mongoose') const animalSchema = new mongoose.Schema({ name: { type: String, required: [true, 'Please enter name'], trim: true, maxLength: [100, 'The name cannot exceed 100 characters'] }, ... image: { public_id: { type: String, required: true }, url: { type: String, required: true }, } }) module.exports = mongoose.model('Animal', animalSchema);AnimalReductor
export const animalDetailsReducer = (state = { animal: {} }, action) => { switch(action.type) { case ANIMALS_DETAILS_REQUEST: return { ...state, loading: true, } case ANIMALS_DETAILS_SUCCESS: return { loading:false, animal: action.payload, } case ANIMALS_DETAILS_FAIL: return { ...state, error: action.payload } case CLEAR_ERRORS: return { ...state, error: null } default: return state; } }y esto es lo que uso en mi interfaz para mostrar los detalles de los animales
{animal.image && animal.image.map(img => ( <div key={img.public_id}> <img className="d-block w-100" src={img.url} alt="" />Se muestran el nombre, el género, la raza y el tipo del animal, pero no el animal.url.
Parece que su esquema tiene animal.image definido como un objeto. Array.prototype.map solo existe en matrices, no en objetos.
> Object.prototype.map undefined > Array.prototype.map [Function: map]Entonces puede eliminar el mapa y, en su lugar, representar condicionalmente el div:
{animal.image && <div key={img.public_id}><img className="d-block w-100" src={img.url} alt="" /></div>}