React组件中使用JavaScript根据指定键值筛选获取对应特定键值的方法

实现方案 #

核心逻辑 #

使用JavaScript原生数组的find()方法匹配type为Three的元素，直接提取对应url字段即可，搭配可选链、空值合并运算符做异常兜底，避免匹配不到对应项时抛出报错。

完整组件代码 #

const MyComponent = () => {
  // 此处替换为你实际从接口获取到的images数组
  const images = [
    {
      "url": "https://example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
      "type": "One"
    },
    {
      "url": "https://example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
      "type": "Two"
    },
    {
      "url": "https://example/c18336d6-61ee-4c7c-be6b-397352b6fd63",
      "type": "Three"
    }
  ]

  // 提前提取目标url，避免在map中重复执行筛选逻辑，优化性能
  const targetImageUrl = images.find(img => img.type === 'Three')?.url ?? ''

  const items = nodes.map((item) => {
    return {
      myImage: targetImageUrl
    };
  }) || [];

  return <Slides items={items} />
}

export default MyComponent;

补充说明 #

• 如果images是nodes中每个item下的子属性，把筛选逻辑放到map内部即可：

  const items = nodes.map((item) => {
    return {
      myImage: item.images.find(img => img.type === 'Three')?.url ?? ''
    };
  }) || [];
  

• 若存在多个type为Three的项，需要获取全部对应url，可改用filter()方法遍历取值。
• 低版本项目不支持ES2020语法的话，可以改用兼容写法：

  const targetImg = images.find(function(img) {
    return img.type === 'Three'
  })
  const targetImageUrl = targetImg ? targetImg.url : '默认占位图地址'
  

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