React嵌套Map与Filter问题：按年份匹配展示API数据失败

语法错误原因 #

你代码里的语法错误是因为React要求JSX表达式必须返回单个根元素。在years.map的回调函数中，你直接返回了<h1>和{data.map(...)}两个同级元素，没有用一个容器（比如<div>或<React.Fragment>）包裹起来，这就触发了语法报错。

功能实现优化 #

另外，你需要展示对应年份的匹配数据，直接用data.map会渲染所有数据，不符合需求。正确的做法是先用filter筛选出当前年份的数据，再对筛选后的结果进行渲染。

修正后的代码 #

export default function App() {
  const years = [2020, 2019, 2018];
  const data = [{ year: 2019, test: "test" }];

  return (
    <div>
      {years.map((year) => (
        // 用div包裹当前年份的标题和对应数据，同时添加唯一key
        <div key={year} className="year-section">
          <h1>{year}</h1>
          {/* 先筛选出当前年份的数据，再渲染 */}
          {data.filter(item => item.year === year).map((item) => (
            // 给每个数据项添加唯一key，建议用数据的唯一标识，这里用test字段示例
            <div key={item.test}>{item.test}</div>
          ))}
        </div>
      ))}
    </div>
  );
}

关键改动说明 #

• 给years.map的每个迭代结果套了一个<div>作为根容器，并添加了key={year}（React列表渲染必须有唯一key）。
• 用data.filter(item => item.year === year)筛选出当前年份对应的数据，再对筛选后的数组进行map渲染，确保只展示对应年份的内容。
• 给数据项的map也添加了唯一key，避免React警告。

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