时间戳

首页 > 解决方案 > 用地图反应复杂的过滤器

javascript - 用地图反应复杂的过滤器

问题描述

更新的问题。

我正在尝试在我的地图中引入一个过滤器，以便用户可以使用多个选择框定义他们想要查看的选项。

我面临的问题实际上是他们过滤选项后的页面。

示例：我有 5 个名称，它们都有不同的颜色和不同的活动状态，它们存储在一个数组中，如下所示：

const info = [
{ name: "A1"
  colour: "Blue"
  active: "Yes"
},
{ name: "B2"
  colour: "Red"
  active: "Yes"
},
{ name: "C3"
  colour: "Green"
  active: "No"
},
{ name: "D4"
  colour: "Yellow"
  active: "No"
},
{ name: "E5"
  colour: "Orange"
  active: "Yes"
},

我使用过滤“非活动”

{info.filter(info => info.active.includes("Yes")).map((index, value) => {
return (
   <div>{info[value].name}</div>
   //THIS DOES NOT DISPLAY THE CORRECT NAME FOR A START.
   <Navlink to={{ pathname: "/confirmChoices", state: {choice: value}}>CLICK</Navlink>
   //THIS IS NOW PASSING THE WRONG VALUE TO THE NEXT PAGE.
)};

该页面显示正确的项目数量，因此：

A1
CLICK
B2
CLICK
C3 // THIS SHOULD BE E5 
CLICK

现在第二个问题是当我想点击应该是E5的C3时。下一页加载并显示C3而不是E5的信息。

像这样

Name: C3
COLOUR: RED
ACTIVE: NO

标签： javascriptreactjs

解决方案

您没有使用内部回调中的变量.map()。这将为您指出正确的值。

.filter()并且.map()不要更改原始数组，而是返回一个新数组。

由于您将原始数组中的索引值作为道具传递，因此您不能在.map(). 该索引（在本例中为 2）不是E5的索引。您必须使用类似的东西从原始数组中获取索引findIndex。

{info.filter(info => info.active.includes("Yes")).map((value, index) => {
let originalIndex = info.findIndex((item)=>item.name == value.name);
return (
   <div>{value.name}</div>
   <Navlink to={{ pathname: "/confirmChoices", state: {choice: originalIndex }}>CLICK</Navlink>
)};

还会建议使用更好的变量名。回调中的第一个参数.map()是值，第二个是索引。

推荐阅读