React中如何按关联关系过滤两个JSON数组，展示项目及对应参与居民

基础实现（数据量不大的场景） #

核心逻辑是渲染每个项目时，从居民数组中过滤出关联的居民即可，以下是示例代码：

import { useState } from 'react';

function ProjectList() {
  // 你已经存入state的两个数组，此处仅做示例
  const [residents, setResidents] = useState([]); // 居民信息数组
  const [projects, setProjects] = useState([]); // 项目信息数组

  return (
    <div>
      <h2>项目列表</h2>
      {projects.map(project => (
        <div key={project.id} className="project-item">
          <h3>项目名称：{project.name}</h3>
          <p>项目描述：{project.desc}</p>
          <div className="resident-list">
            <h4>参与居民：</h4>
            {/* 过滤当前项目对应的居民，假设关联规则为居民对象的projectId等于项目id */}
            {residents.filter(resident => resident.projectId === project.id).map(resident => (
              <span key={resident.id} className="resident-tag">
                {resident.name}
              </span>
            ))}
            {/* 如果关联规则是项目对象存储了参与居民的id数组，过滤逻辑改为下方即可
            {residents.filter(resident => project.residentIds.includes(resident.id)).map(...)
            */}
          </div>
        </div>
      ))}
    </div>
  )
}

优化实现（数据量较大的场景） #

如果两个数组数据量很大，每次渲染都循环过滤会产生不必要的性能损耗，可以用useMemo提前生成项目id到对应居民数组的映射表，避免重复计算：

import { useState, useMemo } from 'react';

function ProjectList() {
  const [residents, setResidents] = useState([]);
  const [projects, setProjects] = useState([]);

  // 仅当residents数组变化时才重新生成映射表
  const projectResidentMap = useMemo(() => {
    const map = new Map();
    residents.forEach(resident => {
      if (!map.has(resident.projectId)) {
        map.set(resident.projectId, []);
      }
      map.get(resident.projectId).push(resident);
    })
    return map;
  }, [residents]);

  return (
    <div>
      <h2>项目列表</h2>
      {projects.map(project => (
        <div key={project.id} className="project-item">
          <h3>项目名称：{project.name}</h3>
          <p>项目描述：{project.desc}</p>
          <div className="resident-list">
            <h4>参与居民：</h4>
            {/* 直接从映射表取数据，无需每次循环过滤 */}
            {(projectResidentMap.get(project.id) || []).map(resident => (
              <span key={resident.id} className="resident-tag">
                {resident.name}
              </span>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

• 两种方案的关联逻辑都可以根据你实际的字段名调整，只要修改匹配条件即可
• 如果两个数组没有明确的关联字段，需要先确认关联规则后再调整匹配逻辑

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