Javascript 反应类型错误：skills.map不是函数

我有一个对象

skills

，我想迭代它并映射它的内容。该对象如下所示：

{
    "_id": {
            "$oid":"5d85b311e180652980824193"
    },
    "date":{
            "$date":{ "$numberLong":"1569043209148" }
    },
    "title": "test",
    "image":"test image",
    "description":"test desc",
    "__v":{ 
           "$numberInt":"0"
    }
}

    componentDidMount() {
        this.props.fetchSkills();
    }

    render() {

        const { skills } = this.props
        let skillData

        if (skills.length === 0) {

            return (
                <p>There are no skills to display</p>
            )

        } else {

            skillData = skills.map(skill => (

                <div key={skill._id}>       
                    <div>
                        <img src={skill.image} alt="" />
                    </div>

                    <div>
                        <h2>{skill.title}</h2>
                        <div>
                            <span>{skill.date}</span>
                        </div>
                        <div>
                            <p>{skill.description}</p>
                        </div>
                    </div>
                </div>

            ))
        }

        return (
            <div>

                {skillData}

            </div>
        )
    }

[
    {
        "_id": {
                "$oid":"5d85b311e180652980824193"
        },
        "date":{
                "$date":{ "$numberLong":"1569043209148" }
        },
        "title": "test",
        "image":"test image",
        "description":"test desc",
        "__v":{ 
               "$numberInt":"0"
        }
    }
]

我正在使用MongoDB 我的映射如下所示：

{
    "_id": {
            "$oid":"5d85b311e180652980824193"
    },
    "date":{
            "$date":{ "$numberLong":"1569043209148" }
    },
    "title": "test",
    "image":"test image",
    "description":"test desc",
    "__v":{ 
           "$numberInt":"0"
    }
}

    componentDidMount() {
        this.props.fetchSkills();
    }

    render() {

        const { skills } = this.props
        let skillData

        if (skills.length === 0) {

            return (
                <p>There are no skills to display</p>
            )

        } else {

            skillData = skills.map(skill => (

                <div key={skill._id}>       
                    <div>
                        <img src={skill.image} alt="" />
                    </div>

                    <div>
                        <h2>{skill.title}</h2>
                        <div>
                            <span>{skill.date}</span>
                        </div>
                        <div>
                            <p>{skill.description}</p>
                        </div>
                    </div>
                </div>

            ))
        }

        return (
            <div>

                {skillData}

            </div>
        )
    }

[
    {
        "_id": {
                "$oid":"5d85b311e180652980824193"
        },
        "date":{
                "$date":{ "$numberLong":"1569043209148" }
        },
        "title": "test",
        "image":"test image",
        "description":"test desc",
        "__v":{ 
               "$numberInt":"0"
        }
    }
]

componentDidMount（）{
this.props.fetchSkills（）；
}
render（）{
const{skills}=this.props
让skillData
如果（skills.length==0）{
返回(
没有技能可以展示

)
}否则{
skillData=skills.map（skill=>(
{skill.title}
{skill.date}
{skill.description}

))
}
返回(
{skillData}
)
}

但是，我在加载页面时出现以下错误：

TypeError:skills.map不是函数

26 |）
27 |}其他{
28 | 
>29 | skillData=skills.map（skill=>(
30 | ^               
31 |                       
32 |                

---

我想这是因为.map只能遍历数组，但我正在尝试遍历对象。

您需要一个

数组，才能使用函数
.map（）遍历它。

因此，只需在对象的
数组中变换
对象
，如下所示：

{
    "_id": {
            "$oid":"5d85b311e180652980824193"
    },
    "date":{
            "$date":{ "$numberLong":"1569043209148" }
    },
    "title": "test",
    "image":"test image",
    "description":"test desc",
    "__v":{ 
           "$numberInt":"0"
    }
}

    componentDidMount() {
        this.props.fetchSkills();
    }

    render() {

        const { skills } = this.props
        let skillData

        if (skills.length === 0) {

            return (
                <p>There are no skills to display</p>
            )

        } else {

            skillData = skills.map(skill => (

                <div key={skill._id}>       
                    <div>
                        <img src={skill.image} alt="" />
                    </div>

                    <div>
                        <h2>{skill.title}</h2>
                        <div>
                            <span>{skill.date}</span>
                        </div>
                        <div>
                            <p>{skill.description}</p>
                        </div>
                    </div>
                </div>

            ))
        }

        return (
            <div>

                {skillData}

            </div>
        )
    }

[
    {
        "_id": {
                "$oid":"5d85b311e180652980824193"
        },
        "date":{
                "$date":{ "$numberLong":"1569043209148" }
        },
        "title": "test",
        "image":"test image",
        "description":"test desc",
        "__v":{ 
               "$numberInt":"0"
        }
    }
]

现在您将能够成功地使用
.map（）