React JSX中如何根据ID数组过滤对象数组

需求说明 #

你有一个包含用户信息的对象数组，以及一个目标ID数组，需要在React的JSX中只渲染对象数组里ID存在于目标ID数组中的条目。

示例数据 #

对象数组A：

const A = [
  { id: '123', name: 'john', city: 'Newyork' },
  { id: '345', name: 'martin', city: 'Tokyo' },
  { id: '456', name: 'lee', city: 'Malbonre' },
  { id: '567', name: 'roman', city: 'Delhi' },
  { id: '789', name: 'julie', city: 'US' }
];

目标ID数组B：

const B = [123, 456, 567];

实现步骤 #

1. 统一ID类型并优化查找效率：把目标ID数组转成Set，同时统一ID的类型（比如对象的id是字符串，数组B的是数字，要转成一致类型），Set.has()的查找速度比数组includes()更快，大数据量下优势明显。
2. 过滤对象数组：用数组的filter()方法，筛选出id存在于Set中的对象。
3. 在JSX中渲染结果：遍历过滤后的数组，渲染每个对象的信息。

完整React组件示例 #

import React from 'react';

function FilteredUserList() {
  const A = [
    { id: '123', name: 'john', city: 'Newyork' },
    { id: '345', name: 'martin', city: 'Tokyo' },
    { id: '456', name: 'lee', city: 'Malbonre' },
    { id: '567', name: 'roman', city: 'Delhi' },
    { id: '789', name: 'julie', city: 'US' }
  ];
  const B = [123, 456, 567];

  // 转成Set并统一类型为字符串
  const targetIds = new Set(B.map(id => String(id)));
  // 过滤数组
  const filteredUsers = A.filter(user => targetIds.has(user.id));

  return (
    <div>
      <h3>匹配的用户列表</h3>
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>
            {user.name} - {user.city}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FilteredUserList;

注意点 #

• 必须统一ID类型：如果对象的id是字符串，目标ID是数字，直接对比会不匹配，所以要转成相同类型（比如都转成字符串或数字）。
• 如果数据量极小，也可以直接用B.includes(Number(user.id))实现过滤，但大数据量下用Set的性能更优。

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