.map 没有返回值（不是函数）

Posted 2023-02-22

【中文标题】.map 没有返回值（不是函数）

【英文标题】：.map is not returning the values(not a function)

【发布时间】：2020-08-17 05:54:49

【问题描述】：

我正在尝试将我存储在数据库中的类似博客列表返回到 nextjs 中的组件。

但我收到一个错误related.map is not a function

我尝试使用 JSON.stringify(related) 进行调试 这给了我 JSON 对象的响应。

"related":"_id":"5eab0a0b2741da18f0d3624e","title":"lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....","slug":"lorem-blog-3-one",
"postedBy":"_id":"5e9d3833a73b2c0cec9f5e1c","name":"user1","profile":"http://localhost:3000/profile/RxAq9u5Ck","updatedAt":"2020-04-30T17:25:31.977Z"

我正在使用的功能

 const showRelatedBlogs = () => 
        return related.map((blog, i) => (
            <div className="col-md-4" key=i>
                <article>
                    <RelatedCard blog=blog />
                </article>
            </div> 

        ));
    ;

【问题讨论】：

如果我的回答对您有帮助，您可以将其标记为已接受的答案吗？

【参考方案1】：

你试图在一个普通对象上调用数组的方法.map，related 应该是一个数组。

【参考方案2】：

您从服务器获得的响应表明您没有获得博客列表，而是 1 个博客。你有两个选择

让您的服务器返回一系列博客。所以你的 JSON 响应是：

    "related": [
        
            "_id": "5eab0a0b2741da18f0d3624e",
            "title": "lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....",
            "slug": "lorem-blog-3-one",
            "postedBy": 
                "_id": "5e9d3833a73b2c0cec9f5e1c",
                "name": "user1",
                "profile": "http://localhost:3000/profile/RxAq9u5Ck"
            ,
            "updatedAt": "2020-04-30T17:25:31.977Z"
        ,
        
            "_id": "5eab0a0b2741da18f0d3624e",
            "title": "lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsumlorem ipsum lorem ipsum  ....",
            "slug": "lorem-blog-3-one",
            "postedBy": 
                "_id": "5e9d3833a73b2c0cec9f5e1c",
                "name": "user1",
                "profile": "http://localhost:3000/profile/RxAq9u5Ck"
            ,
            "updatedAt": "2020-04-30T17:25:31.977Z"
        ,
        //...
    ]

然后在您的组件中，您可以像以前一样使用.map 函数。

您只显示一个博客信息。因此，您应该只显示 1，而不是映射。您的组件将如下所示：

// Lets say `related` is a prop
const showRelatedBlog = ( related ) => 
    return (
        <div className="col-md-4">
            <article>
                <RelatedCard blog=related />
            </article>
        </div> 

    );
;

【讨论】：

谢谢它的工作，我更改了 api 服务器以返回一个博客数组

太棒了。很高兴它有帮助