react，控制台可以看到获取到数据，然而前端界面只显示出表格头部的标题内容，没有显示出表格内的数据？

Question

在使用的react版本如下：

代码如下：

  const renderUsersItem = () => {
    return (<table align="center" border="1" cellPadding="0" cellSpacing="0" width="100%" height="25">
    <thead height="30">
    <tr>
      <th>用户代码</th>
      <th>用户名</th>
      <th>昵称</th>
    </tr>
  </thead>
    {userslist.map((item, index) => {
            <tbody key={item.code}>
              <tr>
                <td>{item.code}</td>
                <td>{item.username}</td>
                <td>{item.nickname}</td>
              </tr>
            </tbody>
    })}
          
      )
  }

目前效果是，控制台可以看到获取到数据，然而前端界面只显示出表格头部的标题内容，没有显示出表格内的数据
请问如何修改才能显示表格内容？请在现有代码基础上展示说明，谢谢

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在您的代码中，map函数中的箭头函数没有返回任何内容，因此表格行未被正确渲染。您可以尝试将箭头函数中的内容包装在返回语句中。例如：

const renderUsersItem = () => {
  return (
    <table align="center" border="1" cellPadding="0" cellSpacing="0" width="100%" height="25">
      <thead height="30">
        <tr>
          <th>用户代码</th>
          <th>用户名</th>
          <th>昵称</th>
        </tr>
      </thead>
      <tbody>
        {userslist.map((item, index) => {
          return (
            <tr key={item.code}>
              <td>{item.code}</td>
              <td>{item.username}</td>
              <td>{item.nickname}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

在此代码中，我们将整个表格行包装在返回语句中，这将导致正确渲染表格。我们还将表格主体放在tbody标记中，这是符合HTML规范的。每个表格行都需要唯一的键（我们使用了每个项目的code属性），以便React可以更有效地管理更新。