使用多重三元运算符渲染React组件时条件分支不生效问题

你的多重三元运算符存在逻辑优先级顺序错误，同时将副作用逻辑和渲染逻辑放在了互斥分支中，具体问题如下：

• 多重三元运算符从左到右依次判断，第一个条件data.shippingData命中后会直接返回<CheckoutPayment />，后续data && data.agree === true的判断完全不会执行，因此对应分支的console.log永远触发不了
• 你需求中「存在shippingData且agree为true时执行console.log」是额外的副作用逻辑，不应该和渲染逻辑拆成互斥分支，按照你原来的写法，就算这个分支命中，返回的是console.log的返回值undefined，该渲染位置会空显示，也不符合你要渲染<CheckoutPayment />的要求

方案1：直接调整JSX内的判断顺序（适合简单副作用） #

调整判断优先级，把同时满足两个条件的分支放在最前面，用逗号运算符先执行副作用再返回组件：

{
  data?.shippingData && data.agree === true ? (
    // 括号包裹多个表达式，逗号运算符返回最后一个表达式的值
    (console.log("Hello World"), <CheckoutPayment data={data} setData={setData} />)
  ) : data?.shippingData ? (
    <CheckoutPayment data={data} setData={setData} />
  ) : (
    <CheckoutShipping setData={setData} />
  )
}

代码中新增的?.可选链运算符可以避免data为undefined时的读取报错。

方案2：副作用拆分到useEffect（更符合React最佳实践） #

渲染逻辑和副作用逻辑分离，可读性和可维护性更高：

// 单独监听数据变化执行副作用
useEffect(() => {
  if (data?.shippingData && data.agree === true) {
    console.log("Hello World")
  }
}, [data])

// 渲染部分只负责判断返回对应组件
{
  data?.shippingData ? (
    <CheckoutPayment data={data} setData={setData} />
  ) : (
    <CheckoutShipping setData={setData} />
  )
}

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