.map не возвращает значения (не функция) - PullRequest
Новая
       54

.map не возвращает значения (не функция)

1 голос
/ 02 мая 2020

Я пытаюсь вернуть список похожих блогов, которые я храню в базе данных, компоненту в следующем js.

Но я получаю сообщение об ошибке 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> 

        ));
    };

Ответы [ 2 ]

1 голос
/ 02 мая 2020

Ответ, который вы получаете от своего сервера, показывает, что вы получаете не список блогов, а 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> 

    );
};
1 голос
/ 02 мая 2020

Вы пытаетесь вызвать метод массива .map для простого объекта, related должен быть массивом.

...