如何map遍历渲染数组过滤得到的filteredResults及对应索引

现有代码存在两个核心问题，导致过滤结果无法正常渲染：

1. filter方法的回调语法错误：Array.filter仅接收一个用于条件判断的回调函数，原代码在判断逻辑中嵌套了多余的f =>箭头函数，会导致条件判断失效，无法得到正确的过滤结果。
2. 过滤得到的filteredResults是filter函数内的局部变量，没有同步到组件渲染状态中，页面渲染时遍历的始终是原始的projectData数组，自然不会展示过滤后的内容。

filteredResults是和原始projectData结构完全一致的对象数组，不需要做额外解析，直接遍历即可读取ProjectName等所有字段，遍历取索引的方式和原数组map写法完全一致。

• 新增组件状态专门存储当前需要展示的列表数据，默认值设为全量的projectData
• 修复filter的判断逻辑，去掉多余的嵌套箭头函数，可补充空值判断避免字段不存在时抛出JS错误
• 点击触发筛选时，将得到的过滤结果存入展示状态，触发组件重新渲染
• 渲染时遍历展示状态对应的数组，而非原始的全量projectData

import { useState } from 'react';

// 此处省略你已有的projectData、filterKeyword、nameArea等变量定义
// const projectData = [...];
// const filterKeyword = '';
// const nameArea = '';

export default function ProjectList() {
  // 存储当前展示的列表，默认展示全量数据
  const [displayList, setDisplayList] = useState(projectData);

  function handleFilter() {
    // 修复过滤逻辑，单回调内完成所有条件判断
    const filteredResults = projectData.filter(item => {
      const matchProjectName = item.ProjectName?.includes(filterKeyword) ?? false;
      const matchArea = item.PartitionKey?.includes(nameArea) ?? false;
      return matchProjectName && matchArea;
    });
    // 将过滤结果同步到状态，触发页面重渲染
    setDisplayList(filteredResults);
    console.log('过滤结果：', filteredResults);
  }

  return (
    <Stack direction="row" id="projectResults">
      <Masonry columns={2} spacing={2}>
        {/* 遍历展示状态的数组，需要索引直接取第二个参数即可 */}
        {displayList?.map((card, index) => (
          <MasonryItem key={card.RowKey}>
            {/* 直接读取对象字段渲染，无需额外解析 */}
            <div className="project-title">{card.ProjectName}</div>
            {/* 其余字段直接通过card.字段名的方式渲染即可 */}
          </MasonryItem>
        ))}
      </Masonry>
      {/* 筛选按钮绑定点击事件 */}
      <button onClick={handleFilter}>执行筛选</button>
    </Stack>
  );
}

补充说明：如果需要重置为全量展示，直接调用setDisplayList(projectData)即可；如果需要输入关键词实时筛选，可以把过滤逻辑移到输入框的onChange事件中，无需点击按钮触发。

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