React TypeError：skills.map 不是函数

Posted 2023-02-22

【中文标题】React TypeError：skills.map 不是函数

【英文标题】：React TypeError: skills.map is not a function

【发布时间】：2020-01-22 08:17:31

【问题描述】：

我有一个对象skills，我想遍历它并映射它的内容。对象如下所示：

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

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

    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  />
                    </div>

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

            ))
        

        return (
            <div>

                skillData

            </div>
        )
    

但是，我在加载页面时收到此错误：

TypeError：skills.map 不是函数

  26 |            )
  27 |         else 
  28 | 
> 29 |            skillData = skills.map(skill => (
  30 | ^               
  31 |                <div className="item" key=skill._id>       
  32 |                

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

【参考方案1】：

您需要有一个array，以便能够使用函数.map() 对其进行迭代

因此，只需将您的 object 转换为 array of objects，如下所示：

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

现在你就可以成功使用.map()