React基于三元运算符按开关状态渲染对应套餐及安全设置价格

原代码核心问题 #

• 三元渲染逻辑断裂：由于运算符优先级，isAnnually为true时，整个表达式会直接返回原始普通对象数组annualPlans，既没有执行遍历渲染卡片的逻辑，也不符合React的渲染规则，会直接抛出渲染错误
• 价格取值逻辑错误：原逻辑不区分当前遍历的数组来源，只要对象存在annual_price字段就优先取年付价格，会导致在月付列表里错误展示年付价格的问题
• 重复代码冗余：年付、月付两个分支的卡片渲染逻辑完全一致，重复编写会大幅提升后续维护成本

优化后实现代码 #

// 提前根据开关状态确定待渲染的计划数组
const renderPlans = isAnnually ? annualPlans : monthlyPlans;

{/* 统一执行遍历渲染逻辑，两个分支共用同一套渲染规则 */}
{renderPlans.map((plan) => (
  <Fragment key={plan.value}> {/* 优先使用计划唯一标识作为key，避免索引key的性能问题 */}
    <PlanCard
      id={plan.value}
      current={plan.current}
      title={plan.name}
      price={`$ ${
        // 安全取值逻辑：匹配当前开关周期对应的价格字段，做空值兜底
        (isAnnually ? plan.annual_price : plan.monthly_price) 
        ?? plan.annual_price 
        ?? plan.monthly_price 
        ?? 0
      }`}
    />
  </Fragment>
))}

价格字段最安全的赋值方式 #

• 从根源减少判断：建议在数据请求的适配层做字段统一，让annualPlans和monthlyPlans里的价格字段统一命名为price，渲染层直接取plan.price即可，完全不需要做多分支判断，从逻辑上规避取值错误
• 空值处理用??（空值合并运算符）替代||：避免合法的0元价格被||误判为假值，最后兜底固定为0，杜绝页面渲染$ undefined、$ NaN的异常情况
• 取值时优先匹配当前开关状态对应的价格字段，不要盲判两个字段，避免出现取错价格的业务逻辑错误

补充说明：如果两个计划数组的结构完全一致，仅价格字段的数值不同，完全可以在拉取数据后就把两个数组的价格字段统一重命名，后续切换开关的时候只需要切换数组源，不需要任何额外判断。

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