在React中过滤数组而不将其留空,可以使用Array的filter方法结合条件判断来实现。下面是一个示例代码:
import React, { useState } from 'react';
const FilteredList = () => {
const [list, setList] = useState([
{ id: 1, name: 'Apple', category: 'Fruit' },
{ id: 2, name: 'Banana', category: 'Fruit' },
{ id: 3, name: 'Carrot', category: 'Vegetable' },
{ id: 4, name: 'Tomato', category: 'Vegetable' },
]);
const filteredList = list.filter(item => item.category === 'Fruit');
return (
<div>
<h2>Filtered List:</h2>
{filteredList.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};
export default FilteredList;
在上面的代码中,我们使用useState来创建一个名为list的状态变量,它包含了一个包含多个对象的数组。然后,我们使用filter方法来过滤数组,只保留category为'Fruit'的项。最后,我们使用map方法将过滤后的数组渲染到页面上。
这样,即使过滤后的数组为空,页面也不会留空,而是显示一个标题"Filtered List:"。如果要过滤其他条件,只需修改filter方法的条件判断即可。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云