如果是 obj，则按属性过滤 JSON 结果。 React.js 的属性为真

Question

我正在尝试使用 React.js 和钩子来检索和过滤 JSON 数据，但我无法找到任何好的方法来做到这一点。刚才我有我的JSON数据本地，所以它不是来自restAPI或类似的（现在）......我试图创建一个带有按钮的菜单，当我点击它们时，我会得到过滤的数据。我知道...做起来应该不是很困难（因为我已经以一种非常基本的方式来做一个条件，根据某个属性是否为真显示不同的图标。）但无论如何我都在努力解决它。

这是我的代码：

import React, {setState, useState} from 'react';

export const ByCourse = () => {
const projects = window.projects.aaData;
console.log('window.projects = ', projects);

return (
<div className="section-component">
  <h2 className="mt-2 mb-4">By Course</h2>

  <ul className="nav nav-tabs">
    <li className="nav-item">
      <a className="nav-link active" href="#">
        All
      </a>
    </li>
    <li className="nav-item">
      <a className="nav-link" href="#">
        Favorite
      </a>
    </li>
    <li className="nav-item">
      <a className="nav-link" href="#">
        Recent
      </a>
    </li>
    <li className="nav-item">
      <a className="nav-link" href="#">
        Assigned
      </a>
    </li>
  </ul>


  <div className="container">

    {projects.map(project => {

      return(
        <div className="row">
          <div className="w-100">
            <div className="d-flex border mt-1 mb-1 p-3">
              <div className="col-1">
                {project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}
              </div>
              <div className="col-11">
                <div className="font-weight-bold"> {project.projectTitle}</div>
                <div className="font-weight-normal"> {project.ouName}</div>
              </div>
            </div>
          </div>
        </div>

      )})}

  </div>
</div>
);};

我的数据如下所示：

 projects = {"aaData":
 [
 {
   "index":0,
   "projectTitle":"123",
   "userTitle":"VVS-teknik grund",
   "ouName":"fertest1",
   "orgUnitId":1022,
   "projectId":2014,
   "favorite":false,
   "recent":false,
   "userAssigned":false,
   "projectStatus":"ACTIVE",
   "viewLink":"http://xxxxxx
 },
 {
   "index":1,
   "projectTitle":"AAA",
   "userTitle":"AAA",
   "ouName":"fertest1",
   "orgUnitId":1022,
   "projectId":2002,
   "favorite":false,
   "recent":true,
   "userAssigned":false,
   "projectStatus":"ACTIVE",
   "viewLink":"http://xxxxxx
 },
 {
   "index":2,
   "projectTitle":"Activity with image and text",
   "userTitle":"asdas",
   "ouName":"ferfer AB",
   "orgUnitId":1004,
   "projectId":1892,
   "favorite":false,
   "recent":false,
   "userAssigned":true,
   "projectStatus":"NEW",
   "viewLink":"http://xxxxxx"
}]

我尝试使用此处的解决方案：Filtering JSON results in categories - React Hooks 但我得到一个 WEBPACK_1 错误并且无法修复它......

我在这里也做了一个非常基本的过滤：

{project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}

基本上我要找的是：

如果属性 "favorite" 为 true -> 显示带有 attr favorite true 的结果 别的 如果属性 "recent" 为 true -> 仅显示属性最近 == true 的结果 非常感谢您，非常欢迎您提供任何帮助。

Answer 1

这是一个使用useState 设置过滤器的工作示例：

https://codesandbox.io/s/crazy-turing-jd3ym?fontsize=14&hidenavigation=1&theme=dark

Answer 2

首先，过滤或那些功能与 React.js 无关。这是关于 JavaScript 的。

我会尽量说实话，我对你的问题一无所知。你能只写你的问题吗？

注意：不要混合使用条件关键字或类似的东西。 如果您清楚地写出问题，我们将 (i) 帮助您。 奖励：我重构了你的代码。

此处更改列表： 1-我删除了不必要的导入 2-分离你的代码。制作组件。 3- 缩进 4- 短条件（修复重复代码）

import React from 'react';

const Project = data => (
  <div className="row">
    <div className="w-100">
      <div className="d-flex border mt-1 mb-1 p-3">
        <div className="col-1">
          <i className={data.favorite ? "fa fa-star" : "fa fa-star-o"} />
        </div>
        <div className="col-11">
          <div className="font-weight-bold"> {data.projectTitle}</div>
          <div className="font-weight-normal"> {data.ouName}</div>
        </div>
      </div>
    </div>
  </div>
);

export const ByCourse = () => {
  const projects = window.projects.aaData;
  console.log('window.projects = ', projects);

  return (
    <div className="section-component">
      <h2 className="mt-2 mb-4">By Course</h2>

      <ul className="nav nav-tabs">
        <li className="nav-item">
          <a className="nav-link active" href="#">
            All
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">
            Favorite
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">
            Recent
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">
            Assigned
          </a>
        </li>
      </ul>

      <div className="container">
        {projects.map(project => <Project data={project} />)}
      </div>
    </div>
  );
};

Answer 3

我假设您想显示favorite OR recent: true 所在的对象，

1) 一个简单的方法是：

let projects = {
  "aaData": [{
          "index": 0,
          "projectTitle": "123",
          "userTitle": "VVS-teknik grund",
          "ouName": "fertest1",
          "orgUnitId": 1022,
          "projectId": 2014,
          "favorite": true,
          "recent": false,
          "userAssigned": false,
          "projectStatus": "ACTIVE",
          "viewLink": "http://xxxxxx"
      },
      {
          "index": 1,
          "projectTitle": "AAA",
          "userTitle": "AAA",
          "ouName": "fertest1",
          "orgUnitId": 1022,
          "projectId": 2002,
          "favorite": false,
          "recent": true,
          "userAssigned": false,
          "projectStatus": "ACTIVE",
          "viewLink": "http://xxxxxx"
      },
      {
          "index": 2,
          "projectTitle": "Activity with image and text",
          "userTitle": "asdas",
          "ouName": "ferfer AB",
          "orgUnitId": 1004,
          "projectId": 1892,
          "favorite": false,
          "recent": false,
          "userAssigned": true,
          "projectStatus": "NEW",
          "viewLink": "http://xxxxxx"
      }
  ]
}

for (let iterator = 0; iterator < projects.aaData.length; iterator++) {
    if (projects.aaData[iterator].favorite || projects.aaData[iterator].recent) {
        console.log(projects.aaData[iterator])
    } else {
      continue;
    }
}

2) 其他方法是：

let projects = {
      "aaData": [{
              "index": 0,
              "projectTitle": "123",
              "userTitle": "VVS-teknik grund",
              "ouName": "fertest1",
              "orgUnitId": 1022,
              "projectId": 2014,
              "favorite": true,
              "recent": false,
              "userAssigned": false,
              "projectStatus": "ACTIVE",
              "viewLink": "http://xxxxxx"
          },
          {
              "index": 1,
              "projectTitle": "AAA",
              "userTitle": "AAA",
              "ouName": "fertest1",
              "orgUnitId": 1022,
              "projectId": 2002,
              "favorite": false,
              "recent": true,
              "userAssigned": false,
              "projectStatus": "ACTIVE",
              "viewLink": "http://xxxxxx"
          },
          {
              "index": 2,
              "projectTitle": "Activity with image and text",
              "userTitle": "asdas",
              "ouName": "ferfer AB",
              "orgUnitId": 1004,
              "projectId": 1892,
              "favorite": false,
              "recent": false,
              "userAssigned": true,
              "projectStatus": "NEW",
              "viewLink": "http://xxxxxx"
          }
      ]
    }

  let filteredArrayWithNull = projects.aaData.filter((object) => {
    return object.favorite || object.recent ?
            object : null
  })

  let finalFilteredArray = filteredArrayWithNull.filter((object) => object!=null)

  console.log(finalFilteredArray);

阅读更多关于filter()的信息；这里是综合guide