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

【问题标题】：.map is not returning the values(not a function).map 没有返回值（不是函数）
【发布时间】：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> 

        ));
    };

【问题讨论】：

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

标签： json reactjs object next.js map-function

【解决方案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 服务器以返回一个博客数组
太棒了。很高兴它有帮助