React遍历后端返回列表 无status为6的项时隐藏按钮问题

需求：遍历后端返回的分期列表，若列表中不存在status值为'6'的元素，则隐藏对应操作按钮。

原实现存在3个核心错误：

• 误用数组forEach方法：forEach仅用于执行遍历副作用，固定返回undefined，无法作为条件判断的依据，会导致显隐逻辑完全失效。
• useEffect未声明依赖项，会在组件每次渲染时重复执行，存在不必要的性能损耗。
• 未做列表空值兜底，接口返回字段缺失时会直接抛出JS异常。

方案1：保留state控制类名（适配原有代码结构） #

使用数组some方法做存在性判断：该方法遍历数组时只要找到1个满足条件的元素就会终止遍历返回true，所有元素都不满足时返回false，完全匹配需求判断逻辑，性能也优于全量遍历。

useEffect(() => {
  // 空值兜底，避免字段不存在时调用方法报错
  const installmentList = paymentInfoData?.policyInstallmentDtoList || [];
  // 判断列表中是否存在status为'6'的元素
  const hasStatus6Item = installmentList.some(item => item.status === '6');
  // 不存在则加hidden类隐藏按钮，存在则移除类名显示
  setHiddenControlButtonClass(hasStatus6Item ? '' : 'hidden');
}, [paymentInfoData]); // 声明依赖，仅当接口数据变化时重新判断

原有页面JSX结构无需修改：

<div className={hiddenControlButtonClass}>
  <AS.Button variant="outlined" onClick={handlePayment}>
    Devam
  </AS.Button>
</div>

方案2：直接在JSX中计算类名（更简洁，无需额外维护state） #

去掉副作用和单独的class state，渲染时直接计算显隐逻辑，减少状态维护成本，数据更新时会自动触发重算：

<div 
  className={
    (paymentInfoData?.policyInstallmentDtoList || []).some(item => item.status === '6')
      ? ''
      : 'hidden'
  }
>
  <AS.Button variant="outlined" onClick={handlePayment}>
    Devam
  </AS.Button>
</div>

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