Question

我正在尝试将数据库中存储的相似博客列表返回给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> 

        ));
    };

Answer 1

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

Answer 2

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

让您的服务器返回一系列博客。因此，您的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不返回值（不是函数）

2 个答案: