React发票Tab页无未付账单时显示空提示的实现咨询

原有代码不生效的核心原因 #

• 状态映射逻辑写反：需求明确已支付发票对应status 3、status 6，未支付发票为两类状态之外的条目，但原有代码错误将status=6作为未支付发票的判断依据，判断条件从根本上不成立。
• 空状态判断位置错误：针对整表的空判断写在了单条发票的遍历分支内部，只有循环到对应条目时才会触发，列表为空时根本不会执行这段逻辑。
• 数据未做提前拆分：两类发票的渲染逻辑混在同一个单条遍历判断中，很容易出现分支冲突、判断遗漏。

正确实现步骤 #

• 提前拆分两类发票数据源：不要在渲染单条表格行时才判断条目所属分类，在组件渲染最开始就根据状态拆分已支付、未支付列表，避免逻辑混乱。
• 空状态判断前置：在渲染对应Tab内容前先判断当前分类下是否有数据，无数据直接返回提示内容，不再走表格渲染逻辑。
• 关联控制操作按钮显示：未支付Tab下的Continue按钮需要和未支付发票列表联动，无未支付发票时同步隐藏按钮。

修正后代码 #

payment-table.js 调整 #

删除原有写在单条遍历逻辑中的空状态判断，在组件开头提前做数据拆分和分支渲染：

const PaymentTable = (props) => {
  // 提前拆分两类发票数据，兼容status为数字/字符串类型的场景
  const allInvoices = props.paymentList?.policyInstallmentDtoList ?? [];
  const paidInvoices = allInvoices.filter(item => ['3', '6'].includes(String(item.status)));
  const unpaidInvoices = allInvoices.filter(item => !['3', '6'].includes(String(item.status)));

  // 未支付Tab（index=0）渲染逻辑
  if (props.value === 0) {
    // 无未支付发票时直接返回提示
    if (unpaidInvoices.length === 0) {
      return <div className="no-outstanding-tip">You do not have any outstanding invoices</div>
    }
    // 有未支付发票时渲染edit模式表格，直接遍历提前过滤好的unpaidInvoices即可
    return (
      <table className="payment-table edit-mode">
        {/* 原有表头代码保留 */}
        <tbody>
          {unpaidInvoices.map(item => {
            // 原有未支付发票行渲染逻辑，不需要再重复判断status
            return <tr key={item.id}>{/* 行内容 */}</tr>
          })}
        </tbody>
      </table>
    )
  }

  // 已支付Tab（index=1）渲染逻辑
  if (props.value === 1) {
    return (
      <table className="payment-table read-mode">
        {/* 原有表头代码保留 */}
        <tbody>
          {paidInvoices.map(item => {
            // 原有已支付发票行渲染逻辑
            return <tr key={item.id}>{/* 行内容 */}</tr>
          })}
        </tbody>
      </table>
    )
  }

  return null
}

payment-info.js 调整 #

在父组件提前计算是否存在未支付发票，控制Continue按钮的显示：

// 组件内先计算是否存在未支付发票
const allInvoices = paymentInfoData?.policyInstallmentDtoList ?? [];
const hasUnpaid = allInvoices.some(item => !['3', '6'].includes(String(item.status)));

// Tab部分代码修正
<TabPanel value={value} index={0} >
  <PaymentTable variant="edit" paymentList={paymentInfoData} value={value} collectionMethod={collectionMethod} />
  {/* 仅存在未支付发票时显示操作按钮 */}
  {hasUnpaid && (
    <div className={hiddenControlButtonClass}>
      <AS.Button variant="outlined" onClick={handlePayment}>
        Continue
      </AS.Button>
    </div>
  )}
</TabPanel>
<TabPanel value={value} index={1}>
  <PaymentTable variant="read" paymentList={paymentInfoData} value={value} />
</TabPanel>

若需要将提示替换为项目统一的通知组件，直接将提示部分的div替换为对应组件（如AS.Alert）即可，逻辑无需调整。

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