如何在 JSX 中按键过滤 JSON答案

【问题标题】：How can i filter JSON by key in JSX如何在 JSX 中按键过滤 JSON
【发布时间】：2020-03-04 12:29:10
【问题描述】：

当我尝试在 React App 中过滤 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>
  );
};

你能帮帮我吗？尽管我进行了多次搜索，但我没有解决方案...

谢谢

编辑：

在变量reportsByProject中，例如当id.id = 1时，我想获得一个JSON，其中包含所有且只有项目id = 1的报告。

在本例中，reportsByProject 必须等于：


[
  {
    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的tu值是正确的...

【问题讨论】：

请展示最终结果的示例并删除数据，我认为这大部分是无关紧要的。
您的控制台日志显示什么？
==id.id 正在返回正确的 ID？
是 ==id.id 正在返回正确的 id。
我编辑了我的问题。我认为现在更容易理解了。

标签： json reactjs filtering jsx

【解决方案1】：

我找到了解决办法！

问题在于 id.id 是字符串类型。有了 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);
};

【讨论】：