React中根据支付状态动态切换类名报错：status未定义

报错原因 #

出现这个错误通常有两种情况：

• paymentstate初始值不是数组（比如undefined/null），导致首次渲染时map无法执行，或者遍历到了undefined的元素
• 数组中存在某个对象没有status属性，直接访问value.status会触发未定义错误

修复方案 #

1. 确保paymentstate初始化为空数组

在组件的state初始化时，把paymentstate设为[]，避免首次渲染时因为数组不存在导致的问题：

const [paymentstate, setPaymentstate] = useState([]);

2. 增加安全判断，避免访问未定义属性

在访问value.status前，先判断value是否存在，同时用可选链操作符?.防止属性不存在报错，另外给statusClassName设置默认值：

<table className="table display expandable-table">
  <thead>
    <tr>
      <th>S.no</th>
      <th>Name</th>
      <th>Amount</th>
      <th>Mode of payment</th>
      <th>Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    {paymentstate.map((value, key) => {
      // 先判断value是否存在，再取status，默认值设为''
      const status = value?.status ?? '';
      let statusClassName = 'badge badge-secondary'; // 默认类名

      if (status === "pending") {
        statusClassName = "badge badge-warning";
      } else if (status === "success") {
        statusClassName = "badge badge-success";
      } else if (status === "cancel") {
        statusClassName = "badge badge-danger";
      }

      return (
        <tr key={key}>
          <td>{key + 1}</td>
          <td>{value?.name ?? '-'}</td>
          <td className="font-weight-bold">₹{value?.amount ?? '-'}</td>
          <td>{value?.payment_mode ?? '-'}</td>
          <td>21 Sep 2018</td>
          <td className="font-weight-medium">
            <div className={statusClassName}>
              {/* 根据状态显示对应文本，默认显示'Unknown' */}
              {status === 'pending' ? 'Pending' : status === 'success' ? 'Completed' : status === 'cancel' ? 'Cancelled' : 'Unknown'}
            </div>
          </td>
        </tr>
      );
    })}
  </tbody>
</table>

3. 可选优化：用对象映射简化状态判断

可以把状态和类名的对应关系做成对象，替代冗长的if-else，代码更简洁：

{paymentstate.map((value, key) => {
  const status = value?.status ?? '';
  const statusMap = {
    pending: { class: 'badge badge-warning', text: 'Pending' },
    success: { class: 'badge badge-success', text: 'Completed' },
    cancel: { class: 'badge badge-danger', text: 'Cancelled' }
  };
  const currentStatus = statusMap[status] ?? { class: 'badge badge-secondary', text: 'Unknown' };

  return (
    <tr key={key}>
      <td>{key + 1}</td>
      <td>{value?.name ?? '-'}</td>
      <td className="font-weight-bold">₹{value?.amount ?? '-'}</td>
      <td>{value?.payment_mode ?? '-'}</td>
      <td>21 Sep 2018</td>
      <td className="font-weight-medium">
        <div className={currentStatus.class}>{currentStatus.text}</div>
      </td>
    </tr>
  );
})}

额外提示 #

如果paymentstate是从接口请求来的数据，要在请求完成前加加载状态，避免空数组显示空白：

{paymentstate.length === 0 ? (
  <tr><td colSpan="6" className="text-center">Loading...</td></tr>
) : (
  // 遍历代码
)}

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