React中基于输入值实现多字段数组过滤的问题求助

问题修正与优化点 #

1. 原代码在输入为空时返回undefined，会导致所有产品被过滤，应改为返回true以显示全部数据。
2. 扩展过滤逻辑，同时检查名称、平台、开发商等多个字段，只要任意一个字段匹配输入值，就保留该产品。

修改后的完整代码 #

const [inputText, setInputText] = useState('')

const inputHandler = e => {
    const text = e.target.value.toLowerCase()
    setInputText(text)
}

// 定义需要过滤的字段列表，后续新增字段只需在这里添加
const filterableFields = ['name', 'platform', 'developer'];

const filteredData = PRODUCT_LIST.filter(el => {
    // 输入为空时返回所有产品
    if (!inputText) return true;
    
    const lowerInput = inputText.toLowerCase();
    // 检查是否有任意一个字段包含输入文本
    return filterableFields.some(field => {
        return el[field].toLowerCase().includes(lowerInput);
    });
})

代码说明 #

• 使用filterableFields数组统一管理需要过滤的字段，后续要新增过滤字段（比如category），直接往数组里加元素即可，无需修改过滤逻辑。
• Array.some()方法会遍历字段列表，只要有一个字段匹配输入值，就返回true，该产品会被保留在过滤结果中。
• 统一转成小写字母进行匹配，保证过滤的大小写不敏感。

内容的提问来源于stack exchange，提问作者Marek