ReactJS中API返回空数据时如何在表格tbody显示无数据提示

可以通过条件渲染处理空数据场景，既避免map调用报错，又能显示友好提示。核心是先判断数据是否存在且有内容，再决定渲染列表还是空状态提示：

修改后的代码 #

<tbody>
  {
    records?.length ? (
      records.map((d, i) => (
        <tr key={i}>
          <td>{d.id}</td>
          <td>{d.name}</td>             
          <td>
            <Link to={`/update/${d.id}`} className="btn btn-sm btn-success">Update</Link>
            <button onClick = {e => handleSubmit(d.id)} className="btn-del">Delete</button>
          </td>
        </tr>
      ))
    ) : (
      <tr>
        <td colSpan={3} style={{textAlign: 'center', padding: '1rem'}}>暂无数据</td>
      </tr>
    )
  }
</tbody>

关键说明 #

• 使用records?.length判断：可选链操作符?.能避免records为null或undefined时的报错
• 空状态的<td>设置colSpan={3}：让提示文本跨表格的3列居中显示
• 可以通过style或自定义类名调整提示文本的样式，提升视觉体验

内容的提问来源于stack exchange，提问作者Dan