javascript - 在 React 中使用 Array.map

Question

我很困惑这段代码是如何工作的

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

我知道 map 返回一个数组，但它如何返回所有这些标签

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

并渲染它？

我尝试将其更改为 forEach 但不起作用。 UI 上没有显示任何内容:

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

Answer 1

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

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

The forEach() method executes a provided function once for each array element.

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

这意味着，如果您尝试在 forEach 中执行的方法中返回某些内容，则您不会创建标签数组。

JSX 期望渲染一个标签数组，但在 forEach 中，您没有创建数组，而只是迭代该数组，因此 JSX 最后什么也接收不到