React渲染队伍缩写时出现读取undefined的id属性TypeError报错

• 函数调用未传必填参数：restartTeamAbbrevation定义时要求传入homeTeam、startTeamId、awayTeam三个参数，但JSX里直接写restartTeamAbbrevation()没有传任何值，函数内部的homeTeam为undefined，读取undefined的id属性就会抛出你看到的类型错误。
• 条件判断写法错误：判断语句里的{homeTeam.id}是ES6对象简写语法，实际等价于{ homeTeam.id: homeTeam.id }这么一个普通对象，拿字符串类型的队伍ID和对象做相等对比，永远不可能匹配成功，判断逻辑完全失效。
• 滥用async关键字：这个函数里没有任何异步逻辑（比如接口请求、定时器、Promise操作），加了async之后函数会默认返回Promise对象，就算参数传对了，JSX直接渲染只会显示[object Promise]，根本拿不到你要的队伍缩写。

1. 删掉函数上多余的async，修正错误的判断逻辑，再加个空值兜底，避免接口数据还没返回时组件渲染报错：

const restartTeamAbbrevation = (homeTeam, startTeamId, awayTeam) => {
  // 数据没加载完成时返回空字符串兜底
  if (!homeTeam || !awayTeam || !startTeamId) return ''
  return startTeamId === homeTeam.id ? homeTeam.abbreviation : awayTeam.abbreviation
}

2. JSX里调用函数的时候，把组件里对应的三个变量作为参数传进去：

<Modal.Body>
<Row>
    <Col>
        <div className="d-flex">
            <span className="py-1">Team: </span>
            <span className="py-1">{ restartTeamAbbrevation(homeTeam, startTeamId, awayTeam) }</span>
        </div>
    </Col>
</Row>
</Modal.Body>

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