使用 JavaScript Find 处理未定义的对象答案

【问题标题】：Handle Undefined Object Using JavaScript Find使用 JavaScript Find 处理未定义的对象
【发布时间】：2021-04-14 21:31:40
【问题描述】：

我在一个数组中有两个团队，它们有 id 1 和 2：

{
   "teams": [
            {
                "id": 1,
                "name": "England",
                "groupName": 4
            },
            {
                "id": 2,
                "name": "Germany",
                "groupName": 6
            }
    ]
}

我必须对后端进行 API 调用，该调用有时会返回 0 的 id（未映射到上面的数组中）。这是我尝试将其呈现为 Table 时的 JSX 代码：

                        <td style={{ width: '16.66%', wordBreak: 'break-all' }}>
                            {teams.find((team) => team.id === fixture.team1Id).name}
                        </td>

结果，当fixture.team1Id 为0 时，我得到TypeError: Cannot read property 'name' of undefined。如何在前端处理它以在fixture.team1Id 为0 时返回类似“TBC”的字符串？

【问题讨论】：

{(teams.find((team) => team.id === fixture.team1Id) | {}).name}
{(teams.find((team) => team.id === fixture.team1Id)? (teams.find((team) => team.id === fixture.team1Id) .name || "TBC" } 希望这个 sn-p 有帮助，你可以简化它以使其更干净

标签： javascript reactjs jsx react-bootstrap

【解决方案1】：

find 方法将有 undefined 时找不到任何东西。
使用?. 可选链接运算符和?? 无效合并运算符。

{teams.find((team) => team.id === fixture.team1Id)?.name ?? 'TBC'}

更新：当不支持这些运算符时

const found = teams.find((team) => team.id === fixture.team1Id);

{found ? found.name : 'TBC'}

【讨论】：

可选更改在节点 14 及更高版本中可用，这是一个不错的选择，但如果您的服务器节点为
好点@MUHAMMADILYAS。更新为备用。谢谢。

【解决方案2】：

你可以这样做：

<td style={{ width: '16.66%', wordBreak: 'break-all' }}>
    {teams.find((team) => team.id === fixture.team1Id) ? teams.find((team) => team.id === fixture.team1Id).name : "TBC"}
</td>

如果你能用javascript代码本身获取团队会更好

在 Javascript 中

var team = teams.find((team) => team.id === fixture.team1Id);

在 HTML 中

<td style={{ width: '16.66%', wordBreak: 'break-all' }}>
    {team.name || "TBC"}
</td>

【讨论】：

【解决方案3】：

您可以将解构赋值与默认空对象一起使用：

const teams = [{
    "id": 1,
    "name": "England",
    "groupName": 4
  },
  {
    "id": 2,
    "name": "Germany",
    "groupName": 6
  }
]

const { name } = teams.find((team) => team.id === 0) || {}

console.log(name)

或者简单地使用两个变量，一个用于找到的团队，一个用于找到的团队名称：

const teams = [{
    "id": 1,
    "name": "England",
    "groupName": 4
  },
  {
    "id": 2,
    "name": "Germany",
    "groupName": 6
  }
]

const foundTeams = teams.find((team) => team.id === 0)
const foundTeamsName = foundTeams && foundTeams.name

console.log(foundTeamsName)

【讨论】：