Error: animal.image.map is not a function

Question

我目前正在使用 mern stack 制作一个避难所网络应用程序，我正在努力显示我的对象的图像。我已经使用了地图，但我认为它仅适用于数组对象。所以我不知道如何在我的动物对象上获得 images.url。

这是我的 animalSchema

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);

AnimalReducer

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;
    }
}

这就是我在前端用来显示动物细节的内容

                            {animal.image && animal.image.map(img => (
                                    <div key={img.public_id}>
                                        <img className="d-block w-100" src={img.url} alt="" />

显示动物的名称、性别、品种和类型，只有 animal.url 不显示。

Answer 1

您的模式似乎已 animal.image 定义为对象。 Array.prototype.map 只存在于数组，不存在于对象。

> Object.prototype.map
undefined
> Array.prototype.map
[Function: map]

因此您可以删除地图并有条件地渲染 div:

{animal.image && <div key={img.public_id}><img className="d-block w-100" src={img.url} alt="" /></div>}

Error: animal.image.map is not a function

Error: animal.image.map is not a function

html

javascript

reactjs

mern