如何过滤活跃租户数据并仅在全为非活跃时显示一次无结果提示

问题根源 #

你当前的代码在map遍历每个租户时，只要遇到非活跃租户就输出一行"No Results"，导致提示重复出现。正确的做法应该是先过滤出所有活跃租户，再统一判断是否为空，只显示一次空状态提示。

修复后的代码 #

首先添加过滤逻辑：

const [tenants, setTenants] = useState([]);
const tenant_status_active = 0;
// 过滤出仅活跃的租户
const activeTenants = tenants.filter(tenant => tenant.tenantStatus === tenant_status_active);

然后修改表格的tbody部分：

<table className="table table-striped table-hover table-responsive caption-top">
  <caption>Tenants Info:</caption>
  <thead className="table-dark">
    <tr>
      <th>Room No.:</th>
      <th>Name</th>
      <th>E-mail Address</th>
      <th>Is Deposit Paid?</th>
      <th>Lease End Date</th>
      <th colSpan={2}>Action</th>
    </tr>
  </thead>
  <tbody>
    {/* 判断活跃租户数组是否为空 */}
    {activeTenants.length === 0 ? (
      <tr>
        <td colSpan={7} className="text-danger">No Records Found</td>
      </tr>
    ) : (
      {/* 遍历仅活跃的租户 */}
      activeTenants.map(tenant => (
        <tr key={tenant.id}>
          <td>{tenant.roomNumber}</td>
          <td>{tenant.name} {tenant.surname}</td>
          <td>{tenant.email}</td>
          <td>{tenant.isDepositPaid ? 'Yes' : 'No'}</td>
          <td>{tenant.leaseEndDate}</td>
          <td>
            <button
              aria-label="Delete tenant"
              className="btn btn-danger" 
              onClick={() => deleteTenant(tenant)}
            >
              Delete
            </button>
          </td>
          <td>
            <button
              aria-label="Update tenant"
              className="btn btn-primary" 
              onClick={() => updateTenant(tenant)}
            >
              Update
            </button>
          </td>
        </tr>
      ))
    )}
  </tbody>
  <tfoot className="table-dark">
    <tr>
      <td colSpan={7}><small>Table Data &copy;</small></td>
    </tr>
  </tfoot>
</table>

关键修改点 #

• 新增activeTenants变量，通过filter方法筛选出所有tenantStatus为0的活跃租户，避免遍历非活跃数据
• 先判断activeTenants的长度：为空则显示一次空状态提示，不为空则遍历渲染活跃租户行
• 补充了原代码中遗漏的**Is Deposit Paid?**字段的显示逻辑（根据tenant.isDepositPaid值输出Yes/No）

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