时间戳

首页 > 解决方案 > ReactJS查找数组防止返回未定义

javascript - ReactJS查找数组防止返回未定义

问题描述

我想在brandData中获取brandName
但是当productBrandID在brandData中不可用时，它返回未定义
我不希望发生这种情况，我希望它返回一个值，例如---选择品牌---或者什么

              <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 ---'}
                </option>
              </select>

标签： javascripthtmlcssreactjs

解决方案

首先，处理.find()未找到匹配项的情况。您可以为此使用可选链接：

brandData.find(brand => brand.id === productForm.productBrandID)?.brandName

其次，既然这可以安全地不返回任何值（而不是引发错误），那么您可以使用nullish 合并运算符来提供默认值：

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

一旦你有了它，确定你已经拥有的逻辑是否有效。将productForm.productBrandID永远是null或undefined？如果是的话，任何brandData记录都会有它的null价值undefined吗id？我没想到会这样，所以这个新逻辑可能会完全取代你所拥有的逻辑：

<option value={productForm.productBrandID}>
  {brandData.find(brand => brand.id === productForm.productBrandID)?.brandName ?? '--- Select Brand ---'}
</option>

推荐阅读