使用 React 过滤数组：多条件筛选的正确姿势-js教程-PHP中文网

使用 React 过滤数组：多条件筛选的正确姿势

心靈之曲

发布： 2025-07-10 17:18:56

原创

431人浏览过

使用 react 过滤数组：多条件筛选的正确姿势

本文旨在解决在 React 中使用 filter 方法对数组进行多条件筛选时遇到的问题，尤其是在需要排除特定域名的特定 slug 的情况下。我们将深入探讨如何正确地组合条件，避免误删数据，并提供清晰的代码示例，助你掌握灵活运用 filter 的技巧。

在 React 开发中，经常需要对数组数据进行筛选。filter 方法是 JavaScript 中一个强大的工具，可以根据指定的条件创建一个新的数组。然而，当需要应用多个条件时，如何正确地组合这些条件至关重要，否则可能会导致意想不到的结果，例如误删数据。

理解 filter 的工作原理

filter 方法遍历数组中的每个元素，并对每个元素执行一个回调函数。如果回调函数返回 true，则该元素会被包含在新数组中；如果返回 false，则该元素会被排除。关键在于理解回调函数中的条件表达式。

错误的条件组合：&& 的陷阱

初学者常常会尝试使用 && (AND) 操作符来组合多个条件，例如：

array.filter((item) => item.slug !== 'monitor' && item.domain !== 'domain1.com')

登录后复制

上述代码的意图是排除 slug 为 monitor 且 domain 为 domain1.com 的元素。然而，这种写法会导致所有 slug 为 monitor 或 domain 为 domain1.com 的元素都被排除，因为只有当两个条件都为 true 时，整个表达式才为 true，元素才会被保留。

正确的条件组合：|| 的妙用

要实现只排除特定 domain 和 slug 组合的元素，应该使用 || (OR) 操作符，并反转条件：

const data = [
    {
        "domain": "domain1.com",
        "slug": "monitor"
    },
    {
        "domain": "domain1.com",
        "slug": "monitor-1"
    },
    {
        "domain": "domain2.com",
        "slug": "monitor"
    }
];

const filteredData = data.filter((item) => !(item.slug === 'monitor' && item.domain === 'domain1.com'));

console.log(filteredData);

登录后复制

或者使用De Morgan定律，转换成如下形式：

const data = [
    {
        "domain": "domain1.com",
        "slug": "monitor"
    },
    {
        "domain": "domain1.com",
        "slug": "monitor-1"
    },
    {
        "domain": "domain2.com",
        "slug": "monitor"
    }
];

const filteredData = data.filter((item) => (item.slug !== 'monitor' || item.domain !== 'domain1.com'));

console.log(filteredData);

登录后复制

这段代码的逻辑是：如果元素的 slug 不是 monitor 或者元素的 domain 不是 domain1.com，则保留该元素。只有当 slug 为 monitor 且 domain 为 domain1.com 时，该元素才会被排除。

代码示例：React 组件中的应用

以下是一个简单的 React 组件，演示了如何在状态中使用 filter 方法：

import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState([
    { domain: 'domain1.com', slug: 'monitor' },
    { domain: 'domain1.com', slug: 'monitor-1' },
    { domain: 'domain2.com', slug: 'monitor' },
  ]);

  const handleFilter = () => {
    setItems(prevItems =>
      prevItems.filter(item => !(item.slug === 'monitor' && item.domain === 'domain1.com'))
    );
  };

  return (
    <div>
      <button onClick={handleFilter}>Filter Items</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.domain} - {item.slug}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

登录后复制

在这个例子中，点击 "Filter Items" 按钮会触发 handleFilter 函数，该函数使用 filter 方法更新 items 状态，从而重新渲染列表。

总结与注意事项