ReactJS 数组查找避免返回undefined 品牌ID匹配不到时返回默认值

问题原因 #

Array.find() 方法在没有匹配到符合条件的元素时会返回 undefined，此时直接读取 .brandName 属性自然会得到不符合预期的结果。

解决方案 #

你可以用可选链运算符（?.） 配合空值合并运算符（??） 来处理找不到匹配项的场景，修改后的代码如下：

<select className="form-control" id="productBrand" name="productBrand" value={productForm.productBrand} onChange={(e) => handleOnChange(e)}>
  <option value={productForm.productBrandID}>
    {productForm.productBrandID ? (brandData.find(brand => brand.id === productForm.productBrandID)?.brandName ?? '--- Select Brand ---') : '--- Select Brand ---'}
  </option>
</select>

代码说明 #

• 可选链 ?. 会在 find 返回 undefined 时直接终止属性访问，避免抛出属性读取错误
• 空值合并 ?? 会判断前面的值如果是 null 或者 undefined 时，返回后面的默认值

如果你的运行环境不支持可选链和空值合并，也可以用传统的逻辑或写法替代：

{productForm.productBrandID ? (brandData.find(brand => brand.id === productForm.productBrandID) || {}).brandName || '--- Select Brand ---' : '--- Select Brand ---'}

优化建议 #

可以把重复使用的默认文本抽成常量，后续修改只需要改一处：

const DEFAULT_SELECT_TEXT = '--- Select Brand ---'

// 渲染部分
<option value={productForm.productBrandID}>
  {productForm.productBrandID ? (brandData.find(brand => brand.id === productForm.productBrandID)?.brandName ?? DEFAULT_SELECT_TEXT) : DEFAULT_SELECT_TEXT}
</option>

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