React Native多条件三元运算符渲染异常的修复方法

你的代码逻辑本身没有语法错误，但仅778对应的内容能正常显示，大概率是item.diaryId的类型不匹配导致的——比如后端返回的diaryId是字符串类型（如"776"、"775"），而你使用了全等运算符===（严格匹配值和类型），导致条件不成立。

另外，重复判断item.diaryClass.name === "pack"会造成代码冗余，下面给出两种修复方案：

修复方案1：统一类型判断 #

把全等运算符===改为非全等==，或者显式将diaryId转为数字后再做严格比较：

return (
  <>
    {item.diaryClass.name === "pack" && item.diaryId == 778 && (
      <Text>chicken</Text>
    )}
    {item.diaryClass.name === "pack" && item.diaryId == 776 && (
      <Text>buger</Text>
    )}
    {item.diaryClass.name === "pack" && item.diaryId == 775 && (
      <Text>pizza</Text>
    )}
  </>
)

显式转类型的写法（更严谨）：

const diaryId = Number(item.diaryId);
return (
  <>
    {item.diaryClass.name === "pack" && diaryId === 778 && (
      <Text>chicken</Text>
    )}
    {item.diaryClass.name === "pack" && diaryId === 776 && (
      <Text>buger</Text>
    )}
    {item.diaryClass.name === "pack" && diaryId === 775 && (
      <Text>pizza</Text>
    )}
  </>
)

修复方案2：优化为更简洁的判断逻辑 #

先统一判断pack条件，再通过switch或对象映射匹配diaryId，减少冗余代码：

return (
  {item.diaryClass.name === "pack" && (
    <>
      {(() => {
        switch (Number(item.diaryId)) {
          case 778:
            return <Text>chicken</Text>;
          case 776:
            return <Text>buger</Text>;
          case 775:
            return <Text>pizza</Text>;
          default:
            return null;
        }
      })()}
    </>
  )}
)

用对象映射的极简写法：

const foodMap = {
  778: <Text>chicken</Text>,
  776: <Text>buger</Text>,
  775: <Text>pizza</Text>,
};

return (
  {item.diaryClass.name === "pack" && foodMap[Number(item.diaryId)] || null}
)

额外提示 #

React Native返回多个JSX元素时，必须用<>（Fragment）包裹，否则会触发语法错误，上述修复代码已补充该处理。

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