在 js/react 中过滤多个属性和值答案

【问题标题】：Filter multiple properties and values in js/react在 js/react 中过滤多个属性和值
【发布时间】：2021-11-03 23:42:09
【问题描述】：

我希望能够按状态和优先级进行过滤，还希望能够有多种类型的优先级或状态，例如：

[
  {
    "id": 1,
    "status": "IN_PROGRESS",
    "priority": "NONE",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
  {
    "id": 2,
    "status": "WAITING",
    "priority": "HIGH",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
  {
    "id": 3,
    "status": "COMPLETED",
    "priority": "NONE",
    "inspectorId": 2,
    "reportAt": "2021-08-09T12:06:03+00:00",
    "scheduledFor": "2021-08-12T12:06:03+00:00",
  },
]

我目前正在使用.filter 来过滤我选择的值，但是每当我为同一个属性选择多个值时（状态为“WAITING”和“IN_PROGRESS”），我都会得到一个空数组作为返回.

这是我的代码：

allRequests.filter((item) => {
  if (filters !== {}) {
    for (const key in filters) {
      if (item[key] === undefined || item[key] != filters[key]) {
        return null;
      }
    }
  }
  return item;
})

【问题讨论】：

filters 看起来怎么样？

标签： javascript arrays reactjs react-native filter

【解决方案1】：

Javascript array.filter 需要一个谓词函数，并根据该谓词函数返回一组过滤的数组项。

您需要返回true 或false 的布尔值，而不是返回项目。这可能就是您面临此问题的原因。

要按多个状态和优先级进行过滤，请创建一个过滤器对象，如下所示：

      const filters = {
          "status": ["COMPLETED", "IN_PROGRESS"],
          "priority": ["NONE"]
      };

然后将您的代码更新为：

        allRequests.filter((item) => {
          if (Object.keys(filters).length > 0) {
            for (let key in filters) {
              if (item[key] === undefined || !filters[key].includes(item[key])) {
                return false;
              }
            }
          }
          return true;
        })

见：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://zetcode.com/javascript/array-filter/

您可以在下面找到一个工作示例：

const allRequests = [
            {
              "id": 1,
              "status": "IN_PROGRESS",
              "priority": "NONE",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
            {
              "id": 2,
              "status": "WAITING",
              "priority": "HIGH",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
            {
              "id": 3,
              "status": "COMPLETED",
              "priority": "NONE",
              "inspectorId": 2,
              "reportAt": "2021-08-09T12:06:03+00:00",
              "scheduledFor": "2021-08-12T12:06:03+00:00",
            },
          ];

const filters = {
  "status": ["COMPLETED", "IN_PROGRESS"],
  "priority": ["NONE"]
};

const result = allRequests.filter((item) => {
          if (Object.keys(filters).length > 0) {
            for (let key in filters) {
              if (item[key] === undefined || !filters[key].includes(item[key])) {
                return false;
              }
            }
          }
          return true;
        });
        
console.log(result);

【讨论】：