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})}/>
  })
})

Answer 1

ToLower 在 javascript 中不存在。正确的方法是 ToLowerCase()。 虽然您的代码不清楚，但您在 icon = {...} 中使用了括号，这意味着您希望返回一个列表。

如果您确实希望得到一个列表，那么只需将 toLower 更改为 toLowerCase()：

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

否则，如果您确定您将始终有一个唯一的结果，如仅在一个链接中，那么您不必使用 map 方法。 使用返回 LIST 的“过滤器”方法，然后获取第一个也是唯一的项目，并访问“链接”属性。

icon = this.props.icons.filter(icon => icon.color.toLowerCase() === "blue")[0].link;

PS：在您的方法中，您在过滤器方法中编写带有“s”的“图标”：

icon = {this.props.icons.filter(icons=> ....)

请理解，您会在过滤器方法中收到每个个人“图标”，而不是整个列表。

Answer 2

您只需将.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>