React Native TypeScript项目数组过滤时遇push未定义错误求助

错误原因 #

你错误使用了数组filter方法：

• filter的回调函数需要返回布尔值，用来判断当前元素是否保留到结果数组，而非手动调用push
• 在filter回调执行阶段，filteredObjs还未完成赋值，此时它是undefined，调用filteredObjs.push()必然抛出Cannot read property 'push' of undefined错误
• 额外问题：JSON.stringify(item.title)属于冗余操作，直接使用item.title即可（除非item.title是对象类型，但通常标题为字符串）

修复后的代码 #

const handleSearchButtonPressed = () => {
    console.log("inside handleSearchButtonPressed");
    if (!itemListStore) {
        return;
    }
    const text = searchText.toLowerCase().trim();
    console.log("inside 100");

    // 先筛选符合条件的元素，再转换为目标对象结构
    const filteredObjs = itemListStore
        .filter(item => {
            // 处理title为空的情况，避免调用toLowerCase报错
            const title = (item.title || "").toLowerCase();
            return title.includes(text); // 用includes替代match，更适合普通字符串匹配
        })
        .map(item => ({
            title: item.title,
            description: item.description,
            link: item.link
        }));

    console.log("filteredObjs", filteredObjs);
    if (!text) {
        setSearchText("");
        // 若需要清空搜索时恢复原数据，可在此补充：setItemListStore(原始数据源)
    } else if (filteredObjs.length === 0) {
        setNoData(true);
    } else {
        setNoData(false);
        setItemListStore(filteredObjs);
    }
};

关键说明 #

1. 正确使用数组方法：用filter筛选符合条件的元素，再用map转换为目标对象结构，逻辑清晰且符合数组方法的设计意图
2. 优化字符串匹配：用includes替代match，避免正则表达式带来的特殊字符转义问题
3. 空值防御：给item.title设置默认空字符串，防止undefined调用toLowerCase报错
4. 简化条件判断：原代码中!Array.isArray(filteredObjs)完全冗余，因为filter和map的返回值必然是数组

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