JSON无数据时React Table组件未正常显示问题求助

当JSON文件中没有数据时，Table组件无法正常显示预期的“未找到数据”提示。该组件接收服务器返回的UserData、编辑方法handleEditButton和删除方法handleDeleteButton，期望UserData为空时返回“未找到数据”，否则展示表格，但当前未达到预期效果。

现有代码 #

const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
  if (UserData == '') {
    return (
      <>
        {
           <h2>N Data Found</h2>
        }
      </>
    )
  }
  else {
    return (
      <>
        {
          <table cellSpacing={0} cellPadding={0} className={tableStyles.details}>

            <thead>
              <tr>
                <th className={tableStyles.table}>Id</th>
                <th className={tableStyles.table}>Name</th>
                <th className={tableStyles.table}>Address</th>
                <th className={tableStyles.table}>E-mail</th>
                <th className={tableStyles.table}>Mobile No</th>
                <th className={tableStyles.table}>Gender</th>
                <th className={tableStyles.table}>City</th>
                <th className={tableStyles.table}>Action</th>
              </tr>
            </thead>

            <tbody>
              {
                (UserData &&  UserData.map((user) => (
                  <tr>
                    <th key={user.id}>{user.id}</th>
                    <td className={tableStyles.name}>{user.name}</td>
                    <td className={tableStyles.address}>{user.address}</td>
                    <td className={tableStyles.mail}>{user.mail}</td>
                    <td>{user.no}</td>
                    <td>{user.gender}</td>
                    <td>{user.city}</td>
                    <td colSpan={2} className={tableStyles.btnGroup}>
                      <button className={tableStyles.editBtn} onClick={(e) => { handleEditButton(user.id) }}>Edit</button>
                      <button className={tableStyles.deleteBtn} onClick={(e) => { handleDeleteButton(user.id) }}>Delete</button>
                    </td>
                  </tr>
                )))
               
              }
            </tbody>

          </table>

        }
      </>
    )
  }
}

问题分析 #

1. 空数据判断逻辑错误：当前判断UserData == ''，但服务器返回的空数据通常是空数组[]而非空字符串，导致条件永远不触发。
2. 冗余JSX包裹：返回的空片段内多了一层不必要的{}包裹，属于无效写法。
3. 提示文本错误：N Data Found不符合需求，应改为“未找到数据”。

修复后的代码 #

const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
  // 覆盖数组为空、UserData为undefined或null的情况
  if (!UserData || UserData.length === 0) {
    return <h2>未找到数据</h2>
  }

  return (
    <table cellSpacing={0} cellPadding={0} className={tableStyles.details}>
      <thead>
        <tr>
          <th className={tableStyles.table}>Id</th>
          <th className={tableStyles.table}>Name</th>
          <th className={tableStyles.table}>Address</th>
          <th className={tableStyles.table}>E-mail</th>
          <th className={tableStyles.table}>Mobile No</th>
          <th className={tableStyles.table}>Gender</th>
          <th className={tableStyles.table}>City</th>
          <th className={tableStyles.table}>Action</th>
        </tr>
      </thead>
      <tbody>
        {UserData.map((user) => (
          <tr key={user.id}>
            <th>{user.id}</th>
            <td className={tableStyles.name}>{user.name}</td>
            <td className={tableStyles.address}>{user.address}</td>
            <td className={tableStyles.mail}>{user.mail}</td>
            <td>{user.no}</td>
            <td>{user.gender}</td>
            <td>{user.city}</td>
            <td colSpan={2} className={tableStyles.btnGroup}>
              <button className={tableStyles.editBtn} onClick={() => handleEditButton(user.id)}>Edit</button>
              <button className={tableStyles.deleteBtn} onClick={() => handleDeleteButton(user.id)}>Delete</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

关键修改点 #

• 修正空数据判断逻辑，覆盖所有空值场景
• 移除冗余的JSX包裹，简化代码结构
• 替换提示文本为需求内容
• 将key移至<tr>标签，符合React列表渲染最佳实践
• 简化onClick写法，移除未使用的参数

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