arrays - Reactjs - 过滤对象

Question

我正在尝试过滤一组对象。数组和过滤器/映射如下。知道为什么这不返回链接吗？

大批：

const icons = [
  {
    color: "Yellow",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png",
  },
  {
    color: "blue",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png",
  },
  {
    color: "Green",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png",
  },
  {
    color: "White",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_white.png",
  },
  {
    color: "Orange",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_orange.png",
  },
  {
    color: "Gray",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png",
  },
  {
    color: "Purple",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png",
  },
  {
    color: "Red",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",
  },
  {
    color: "Black",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_black.png",
  },
  {
    color: "Brown",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_brown.png",
  },
];

过滤方法：

 icon= {this.props.icons.filter(icons =>  icons.color.toLower == 'blue').map((icons) => {return icons.link})}/>

整个方法：

renderMarker = this.props.mapData.map((item) => {
    
return item.dataset.map((item2) => {
  return item2.dataPoint.map((item3) => {
    return  <Marker
    onClick={this.onMarkerClick}
    name={item3.name}
    name2={item3._id}
    
    position={{ lat: item3.lat, lng:  item3.lng }}
    key={item3._id}
    icon= {this.props.icons.filter(icons =>  icons.color.toLower == 'blue').map((icons) => {return icons.link})}/>
  })
})

标签： arraysreactjsfilter

Answer 1

您需要做的就是将 更改.toLower为.toLowerCase().

我已经使用[0]索引来获取link. 因此，您需要检查Marker组件中是否存在一条线。

const result = icons
  .filter((icon) => icon.color.toLowerCase() === "blue")
  .map((icons) => {
    return icons.link;
  })[0];
console.log(result);

<script>
const icons = [
  {
    color: "Yellow",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png",
  },
  {
    color: "blue",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png",
  },
  {
    color: "Green",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png",
  },
  {
    color: "White",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_white.png",
  },
  {
    color: "Orange",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_orange.png",
  },
  {
    color: "Gray",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png",
  },
  {
    color: "Purple",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_purple.png",
  },
  {
    color: "Red",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png",
  },
  {
    color: "Black",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_black.png",
  },
  {
    color: "Brown",
    link: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_brown.png",
  },
];
</script>