在 React 中过滤列表

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中处理外部数据
  2. React 中的内联数据过滤
  3. React 中更具可读性的数据过滤
在 React 中过滤列表

React 是一个前端库,它使用可重用组件构建漂亮的界面。但是,UI 元素需要填充实际的信息、视觉、音频或其他内容。

大多数内置在 React 中的应用程序通过 API 从后端服务器接收数据。

在 React 中处理外部数据

在你可以使用数据来填补组件中的空白之前,你必须首先将其存储在应用程序的本地状态中。

有时,父组件接收并存储数据并通过 props 将其传递给其子组件。从 API 接收的数据结构因数据类型和其他因素而异。

在开发应用程序时,接收对象数组并不罕见,你必须根据该数据创建 UI 元素。

例如,你可能会收到描述产品的数据,你的工作就是创建可重用的组件,这些组件接受原始数据作为输入并将其显示为产品列表。

在某些情况下,你只想有条件地显示某个数据子集。例如,如果我们继续产品示例,你可能不想显示缺货产品。

你可以使用 ES6 中引入的 .filter() 数组方法来设置条件并仅显示满足该条件的产品。

如果你决定使用 .filter() 方法,你将进行客户端过滤。或者,你可以过滤服务器上的数据并获取已过滤的数据。

React 中的内联数据过滤

让我们继续我们的产品数据示例,想象我们组件的状态包含一组描述单个产品的对象——价格、名称、描述和可用性。

让我们看一个例子:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  return (
    <div className="App">
      {productData
        .filter((product) => product.available === true)
        .map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

这里有很多东西要解开。首先,我们将产品数据存储在 productData 状态变量中,默认情况下,该变量设置为作为参数传递给 useState() 挂钩的值。

之后,在开始和结束 <div> 标记之间有一段棘手的代码。让我们解释一下花括号。

我们使用它们来告诉 JSX 大括号之间的代码应该被解释为 JavaScript 表达式,而不是纯 HTML。在这种情况下,我们在 productData 数组上调用 filter() 方法,因此大括号是必需的。

下一步是为 .filter() 方法编写一个回调函数。这是我们设置条件来过滤列表的地方。

在这种情况下,我们的回调接受一个具有任意名称 product 的参数。它可以是其他任何东西,并检查对象的 available 属性是否为真。

最终,.filter() 方法将返回一个新数组,由原始数组中满足条件的项组成。

这就是为什么我们在 .filter() 方法的结果上调用 .map() 方法。我们想要获取每个数组项并将它们的值显示为 <h2> 文本。

你可以使用代码并检查 CodeSandbox 上的输出。

React 中更具可读性的数据过滤

如果你认为上述解决方案过于复杂且难以理解,那么你并不孤单。为了使你的代码更具可读性,你可以在 JSX 之外创建一个新变量 filteredFruits,并使用它来存储过滤后的值。

然后你可以在过滤后的数组上调用 .map(),JSX 中的代码看起来会更干净。让我们看一个例子:

export default function App() {
  const [productData, setProductData] = useState([
    {
      price: 10,
      name: "Apple",
      description: "Tasty fruit!",
      available: true
    },
    {
      price: 15,
      name: "Pear",
      description: "Juicy pear straight from the farm",
      available: true
    },
    {
      price: 8,
      name: "Banana",
      description: "Banana from the tropics",
      available: false
    }
  ]);
  const filteredProducts = productData.filter((product) => product.available === true)
  return (
    <div className="App">
      {filteredProducts.map((fruit) => (
          <h2>
            {fruit.name} - {fruit.price + "$"}
          </h2>
        ))}
    </div>
  );
}

这种方法更简洁,更容易理解,尤其是对于初学者。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn