修复搜索栏首次输入出现的TypeError: Cannot read properties of undefined (reading 'toLowerCase')

错误原因 #

1. React状态更新的异步性：调用setQuery(event.target.value)后，query不会立刻更新，首次输入时query还是初始的undefined值，执行query.toLowerCase()就会触发Cannot read properties of undefined错误。
2. 未校验属性存在性：如果filteredData数组里存在el.childName为undefined的元素，直接调用toLowerCase()也会触发相同报错。
3. 过滤逻辑的不合理性：之前基于filteredData二次过滤，会导致搜索结果越来越窄，且首次执行时filteredData可能还未被初始化为backendData。

修复后的代码 #

function Search(event) {
    const inputValue = event.target.value;
    setQuery(inputValue);

    if (inputValue === '') {
        setFilteredData(backendData);
    } else {
        const lowerInput = inputValue.toLowerCase();
        // 从原始数据源重新过滤，避免重复过滤导致结果偏差
        setFilteredData(backendData.filter(el => {
            // 用可选链处理childName不存在的情况
            return el.childName?.toLowerCase().includes(lowerInput);
        }));
    }
}

关键修改说明 #

• 不依赖异步更新的query：直接用event.target.value的本地变量，确保拿到当前最新的输入值，避开React状态更新的异步延迟。
• 基于原始数据源过滤：每次搜索都从backendData重新筛选，保证搜索结果的准确性，不会因为多次过滤导致数据丢失。
• 属性存在性校验：使用el.childName?.toLowerCase()的可选链语法，当childName不存在时会直接返回undefined，避免触发读取undefined属性的错误。

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