在React中使用Array.map

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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

forEach()方法為每個數組元素執行一次提供的函數。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

這意味着，如果您嘗試在forEach執行的方法中返回某些內容，則不會創建標簽數組。

JSX期望呈現一個標簽數組，但是在forEach中，您沒有創建數組，而只是在數組上進行迭代，因此JSX最后什么也沒收到