如何在JSX中按键过滤JSON

我在React应用程序中尝试过滤JSON数据时遇到问题

我的JSON：

function fakeListReports()
{
    return [

  {
    id: 0,
    project: {
      id: 7,
      name: "Music Arena",

      /...more datas.../

    },
    redacteur: "Ced",

    /...more datas.../

  },
  {
    id: 1,
    project: {
      id: 1,

      /...more datas.../

    },
    redacteur: "Ced",

    /...more datas.../

  },
  {
    id: 2,
    project: {
      id: 1,
      name: "Planet Express",

      /...more datas.../

    },
    redacteur: "Ced",

    /...more datas.../

  }
];
}

我想根据项目的id筛选他。我将返回一个列表，其中包含一个项目的所有报告，由他的id

我尝试使用过滤函数，但她总是返回一个空选项卡。。。我已经测试了许多解决方案，但没有成功。我相信过滤功能是达到良好效果的最好方法

我的JSX代码：

const ListReportsByProject = ({ match }) => {
  const id = match.params;
  const [listReport, setListReport] = useState([]);
  const reports = fakeData.fakeListReports();

  const fetchReports = id => {
    console.log(reports);
    console.log(id.id);
    const reportsByProject = reports.filter(r => r.project.id === id.id);
    console.log(reportsByProject);
  };

  useEffect(() => {
    fetchReports(id);
  }, [id]);

  return (
    <div>
      <p>test route</p>
    </div>
  );
};

filter函数始终返回一个空选项卡

id.id的Tu值正确

我找到了解决办法

问题源于id.id是string类型的事实。使用parseInt，问题就解决了

感谢那些试图帮助我的人

 const fetchReports = id => {
    console.log(reports);
    console.log(id);
    const idProject = parseInt(id.id, 10);
    const reportsByProject = reports.filter((r) => r.project.id === idProject);
    console.log(reportsByProject);
};

---

请给出一个最终结果的示例并删除数据，我认为大部分内容都不相关。您的控制台日志显示了什么？

==id.id

返回了正确的id？是==id.id返回了正确的id。我编辑了我的问题。我想现在更容易理解了。

 const fetchReports = id => {
    console.log(reports);
    console.log(id);
    const idProject = parseInt(id.id, 10);
    const reportsByProject = reports.filter((r) => r.project.id === idProject);
    console.log(reportsByProject);
};