React中如何使用三元运算符进行null值检查以避免代码报错？

你的原代码：

const myuser = userList.filter(itm => itm.user.Id == Id)
const email = myuser.length > 0 ? myuser[0].user.email : "";

当itm.user为null时，访问itm.user.Id会触发类型错误。用三元运算符做null检查的话，可以这样修改：

// 过滤时先检查user是否存在，再匹配Id
const myuser = userList.filter(itm => itm.user ? itm.user.Id === Id : false);
// 取邮箱时同样先检查user是否存在
const email = myuser.length > 0 ? (myuser[0].user ? myuser[0].user.email : "") : "";

说明： #

• 在filter的回调函数里，通过itm.user ? itm.user.Id === Id : false实现：如果itm.user不为null/undefined，就进行Id匹配；否则直接返回false，这条数据会被过滤掉。
• 提取邮箱时，再次用三元运算符检查myuser[0].user的存在性，避免即使过滤后仍出现意外null的情况（比如极端场景下数据中途被修改）。

如果项目支持ES2020+，也可以用可选链运算符?.简化写法，但如果必须用三元运算符，上面的代码就能解决问题。

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