Ken428965 2023-03-17 23:59 采纳率: 53.6%
浏览 131
已结题

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

在使用的react版本如下:

img

代码如下:

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

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

  • 写回答

1条回答 默认 最新

  • MarkHan_ 2023-03-18 00:52
    关注

    该回答引用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可以更有效地管理更新。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月18日
  • 已采纳回答 3月18日
  • 创建了问题 3月17日

悬赏问题

  • ¥15 数学建模数学建模需要
  • ¥20 Java Sound Api 调用Mixer.getLine偶现Line unsupported错误。
  • ¥15 使用cuda加速opencv运算但是报错AttributeError: module 'cv2.cuda' has no attribute 'getCudaEnabledDeviceCount'
  • ¥15 java输入输出异常
  • ¥15 三子连珠对弈小游戏制作
  • ¥15 C++扑克牌游戏的编程
  • ¥15 有人能看一下我宿舍管理系统的报修功能该怎么改啊?链表那里总是越界
  • ¥15 cs loadimage运行不了,easyx也下了,没有用
  • ¥15 r包runway详细安装教程
  • ¥15 Html中读取Json文件中数据并制作表格