json - .map 不返回值(不是函数)

Question

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

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

我尝试使用 { JSON.stringify(lated) } 进行调试 这给了我 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> 

        ));
    };

Answer 1

您从服务器获得的响应表明您没有获得博客列表，而是获得了 1 个博客。您有 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> 

    );
};