React页面因数组无[2]项崩溃，三元表达式失效问题排查

页面崩溃的核心原因 #

你现在的代码有两个致命问题：

1. 链式调用未做空值保护：比如match.bookmakers[0].markets[0].outcomes，如果bookmakers为空数组、markets为空数组，或者find找不到对应结果返回undefined，再访问.price就会直接抛出错误导致页面崩溃。
2. 平局判断逻辑错误：你用match[2]去匹配outcome的name，这明显不对（match是对象不是数组，match[2]会返回undefined），而且三元表达式的条件和结果写反了——现在是找到平局结果时显示'Na'，找不到反而显示'Na x'，完全搞反了逻辑。

修复后的代码实现 #

先把重复的赔率查询逻辑抽成小函数，加上空值保护，同时修正平局判断逻辑：

// 辅助函数：根据目标名称获取赔率，找不到返回'N/a'
const getOdds = (outcomes, targetName) => {
  const outcome = outcomes?.find(item => item.name === targetName);
  return outcome?.price ?? 'N/a';
};

<section className='grid gap-1 overflow-y-scroll max-h-[320px] w-full'>
  {allFoundOdds.length &&
    allFoundOdds.map((match, index) => {
      // 提前解构并做空值兜底，避免重复链式调用
      const outcomes = match.bookmakers?.[0]?.markets?.[0]?.outcomes || [];
      const homeOdds = getOdds(outcomes, match.home_team);
      const awayOdds = getOdds(outcomes, match.away_team);
      // 注意：这里的平局名称要和API返回的一致，比如API返回的平局叫'Draw'或'平局'，自行替换成实际值
      const drawOdds = getOdds(outcomes, 'Draw');

      return (
        <article
          key={index}
          className='bg-green-100 border-b-2 border-solid border-black'
        >
          <div>
            <section className='flex justify-between'>
              <div className='overflow-hidden'>{match.home_team}</div>
              <div>WIN {homeOdds}</div>
              <div>LOSE {awayOdds}</div>
              <div>DRAW {drawOdds}</div>
            </section>
            <section>{match.away_team}</section>
          </div>
        </article>
      );
    })}
</section>

关键改进点 #

• 用**可选链操作符?.**处理所有可能为null/undefined的属性访问，避免直接报错
• 用**空值合并操作符??**在找不到赔率时返回'N/a'
• 提取getOdds辅助函数，减少重复代码，逻辑更清晰
• 提前解构outcomes，避免多次重复调用冗长的链式路径
• 修正平局的匹配名称（必须和API返回的平局outcome的name字段完全一致）

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