Использование Array.map в React

Question

Использование Array.map в React

1

Я запутался, как работает этот код

const sidebar = (
        <ul>
        {
            props.posts.map((post) =>
                <li key={post.id}>
                    {post.title}
                </li>
            )
        }
        </ul>
    );

Я знаю, что карта возвращает массив, но как он может вернуть все эти теги

<li key={post.id}>
    {post.title}
</li>

и сделать это?

Я попытался изменить его на forEach, но он не работает. Ничего не отображается в пользовательском интерфейсе:

const sidebar = (
    <ul>
        {
            props.posts.forEach((post) =>{
                return <li key={post.id}>
                    {post.title}
                </li>
            })
        }
    </ul>
);

newbieprogrammer 18 дек. 2018, в 09:11

Источник

0

return in forEach игнорируется, это означает, что обратный вызов имеет тип Function<void> . Array.map этого Array.map возвращает новое значение, оно сильно отличается. Результат вашего выражения forEach не undefined . Результатом выражения map является массив.
briosheje 18 дек. 2018, в 07:53

Теги:

javascript

reactjs

2 ответа

0

props.posts.map(post => (
    <li key={post.i }> 
        {post.title} 
    </li> ))

Robhgn 18 дек. 2018, в 05:20

Ещё вопросы

return in forEach игнорируется, это означает, что обратный вызов имеет тип Function<void> . Array.map этого Array.map возвращает новое значение, оно сильно отличается. Результат вашего выражения forEach не undefined . Результатом выражения map является массив.

Kabbany · Accepted Answer · 2018-12-18T05-44-00.000Z

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Метод forEach() выполняет предоставленную функцию один раз для каждого элемента массива.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Это означает, что если вы пытаетесь вернуть что-то в методе, выполняемом в forEach вы не создаете массив тегов.

JSX ожидает рендеринга массива тегов, но в forEach вы не создаете массив, вы просто перебираете массив, поэтому JSX ничего не получает в конце

Здравствуйте, спасибо, что ответили на мой вопрос. Я знаю эту часть, однако я хочу знать, как отображается массив тегов <li>. Потому что, когда я смотрю на него, он выглядит как <ul>[array_of_list]</ul> . Кроме того, почему тег list не отображается при использовании forEach, даже если я возвращаю его на каждой итерации?
JSX ожидает рендеринга массива тегов, но в forEach вы не создаете массив, вы просто перебираете массив, поэтому JSX ничего не получает в конце.