在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn