为什么我不能在 React JS 中映射这个对象数组？

【问题标题】：Why I cannot map over this array of objects in React JS?为什么我不能在 React JS 中映射这个对象数组？
【发布时间】：2022-01-22 12:32:01
【问题描述】：

为什么我不能在 React JS 中映射这个对象数组？

这是我的代码：

    const columns = [
    { field: 'id', headerName: 'ID', width: 200 },
    { field: 'season', headerName: 'Season', width: 200 },
    { field: 'transferWindow', headerName: 'Transfer Window', width: 200 }
]
<table>
                <thead>
                    <tr>
                        {columns.map((item) => {
                            <th key={item.field}>{item.field}</th>
                        })}
                        
                        {/* <th>{columns[0].field}</th>
                        <th>{columns[1].field}</th>
                        <th>{columns[2].field}</th> */}
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                    </tr>
                </tbody>
            </table>

引号中的代码有效，但地图无效。

【问题讨论】：

• 您在地图调用中没有返回任何内容。 {columns.map((item) => { return <th key={item.field}>{item.field}</th>})} 见：When should I use a return statement in ES6 arrow functions
• 这能回答你的问题吗？ When should I use a return statement in ES6 arrow functions
• 我只需要创建一个小函数来单独创建每个 元素并将其插入到打开和关闭头 标记之间。类似于
• @Chris 不管怎样，OP 最好理解这里的语法错误（以免在建议的标题组件中重复）。
• 尝试用{columns.map(item => ( <th key={item.field}>{item.field}</th> ))}替换：{columns.map((item) => { <th key={item.field}>{item.field}</th> })}