在 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