Reactjs React Typescript列表映射表行未呈现

我有一个名为items的对象列表。我想将列表中的每个对象添加到表中的一行。但是，不会渲染这些行。我正在使用带有react引导的typescript。我想知道为什么会发生这种情况，以及如何修复它。谢谢

Template.tsx

export default function Templates() {
    const items = [
        {
          "name": "Item 1",
          "alt": "First",
          "description": "This is the first item"
        },
        {
          "name": "Item 2",
          "alt": "Second",
          "description": "This is the second item"
        },
        {
          "name": "Item 3",
          "alt": "Third",
          "description": "-"
        }
      ]
    return (
        <>
            <MyTable items={items}>MyTable</MyTable>
        </>
    )
}

导出默认函数模板（）{
常数项=[
{
“名称”：“第1项”，
“alt”：“First”，
“说明”：“这是第一项”
},
{
“名称”：“第2项”，
“alt”：“Second”，
“说明”：“这是第二项”
},
{
“名称”：“第3项”，
“alt”：“第三”，
“说明”：“-”
}
]
返回(
我的桌子
)
}

MyTable.tsx

import React from 'react'
import { Table, Button } from 'react-bootstrap'

type TableProps = {
    items: {
        name: string,
        alt: string,
        description: string
    }[]
}
const MyTable: React.FunctionComponent<TableProps> = ({
    items
  }) => {
    return (
        <>
            <Table striped bordered hover variant="dark">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Alt</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    {items.map(item => {
                        <tr>
                            <td>{item.name}</td>
                            <td>{item.alt}</td>
                            <td>{item.description}</td>
                        </tr>
                    })}
                </tbody>
            </Table>
        </>
        )
  };

export default MyTable;

从“React”导入React
从“react bootstrap”导入{Table，Button}
类型TableProps={
项目：{
名称：string，
alt:string，
描述：字符串
}[]
}
常量MyTable:React.FunctionComponent=({
项目
}) => {
返回(
名称
中高音
描述
{items.map（item=>{
{item.name}
{item.alt}
{item.description}
})}
)
};
导出默认MyTable；

---

现在只渲染thead。

问题是您没有在此处返回任何内容：

{items.map(item => {
    <tr>
       <td>{item.name}</td>
       <td>{item.alt}</td>
       <td>{item.description}</td>
     </tr>
})}

{items.map（item=>{
{item.name}
{item.alt}
{item.description}
})}

为了让它呈现一些东西，你必须返回

试试这个：

{items.map(item => <tr>
  <td>{item.name}</td>
  <td>{item.alt}</td>
  <td>{item.description}</td>
</tr>)}

{items.map（item=>
{item.name}
{item.alt}
{item.description}
)}

如果正在映射项，且映射回调返回未定义（无返回状态），请确保返回迭代项：

{items.map（item=>{
返回(
{item.name}
{item.alt}
{item.description}
)
})}

如何在

项中使用箭头功能有问题。map

请注意，以下各项之间存在差异：

• item=>{}

  ：这是一个函数，在没有返回语句的块中定义了
  语句

• item=>（）

  ：此函数返回单个表达式

  （）

• item=>{return（）}

  ：这是一个函数，在带有return语句的块中包含语句

---

既然其他人已经回答了，我们可以通过在要返回的JSX周围用括号替换大括号和return语句来简化它

例：

{items.map（item=>(
{item.name}
{item.alt}
{item.description}
)
)}

编辑：Soc说了什么^