Я запутался, как работает этот код
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>
);
Метод
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 ничего не получает в конце
<ul>[array_of_list]</ul>
. Кроме того, почему тег list не отображается при использовании forEach, даже если я возвращаю его на каждой итерации?
forEach
вы не создаете массив, вы просто перебираете массив, поэтому JSX ничего не получает в конце.
props.posts.map(post => (
<li key={post.i }>
{post.title}
</li> ))
return
in forEach игнорируется, это означает, что обратный вызов имеет типFunction<void>
.Array.map
этогоArray.map
возвращает новое значение, оно сильно отличается. Результат вашего выражения forEach неundefined
. Результатом выраженияmap
является массив.