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

Question

我正在尝试 return 我存储在数据库中的类似博客列表到 nextjs 中的一个组件。

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

我尝试使用 { JSON.stringify(related) } 进行调试这给了我 JSON object.

的响应

{"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> 

        ));
    };

Answer 1

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

Answer 2

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

让您的服务器 return 包含一系列博客。所以您的 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> 

    );
};

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

.map is not returning the values(not a function)

json

object

reactjs

map-function

next.js