反应地图过滤答案

【问题标题】：React map filtering反应地图过滤
【发布时间】：2022-08-17 23:26:37
【问题描述】：

我有问题的工作分为两部分，第一部分是我已经映射了一个名为的文件中的项目列表数据.js，当用户选择一个选项时，该项目的值被存储到变量中，这是代码：

var selectedName;
  const onButtonClick = mode => {
    selectedName(mode);
};



{UsersNames.map(item => (
  <div onClick={onButtonClick.bind(this, item.title)}>
     <h1>{item.id}</h1>
  </div>
 ))}

第二部分是我想通过已经选择的变量过滤另一个项目列表，即标题并显示该项目的年龄，这是代码：

{Age.filter(age=> age.title.includes({selectedName})).map(item => (
  <div>
     <h1>{item.age}</h1>
  </div>
))}

所以基本上这是我想要得到的工作顺序：

map 1st list -> user chooses an option of the list -> read the value of trait of the selected option -> display the item of another list that has that trait

这种方法行不通。

我希望你理解这个任务，因为它相当混乱，我真的不知道这是否是做这样的事情的正确方法。

标签： reactjs dictionary filter

【解决方案1】：

您必须使用连接到您的 json 数据 (userId) 的唯一键来创建要显示的列表。示例对象： { “用户ID”：1， “姓名”：鲍勃， “年龄”：13， }

因此，您将在 (object.name...) 之类的列表中显示项目，并将 object.userId 作为列表中每个项目的键传递。然后您将能够检索您的 json 对象，因为您使用 id 作为键并显示所选项目的年龄。

您可以查看：https://reactjs.org/docs/lists-and-keys.html 了解更多信息。

编辑：How can I get the selected item from List in React? 也检查一下。

还有这个：https://www.geeksforgeeks.org/how-to-change-list-items-in-reactjs-when-an-item-is-clicked/

请记住，您获得了对象的 id，因此您可以查询任何内容并在请求后显示任何内容。

【讨论】：