Question

我对这段代码的工作方式感到困惑

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>
);

Answer 1

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最后什么也没收到

在React中使用Array.map

1 个答案: