React中使用数组过滤数据时报错，附相关代码求助问题排查

核心错误点 #

• 事件传参逻辑错误：onChange 触发时直接把状态更新函数 setSearchData 传给了 searchRecord，导致 searchRecord 接收的 value 参数是函数类型，调用 value.user.name 时会直接抛出属性读取异常。正确应该从 onChange 的事件对象中获取用户输入的文本值作为参数传递。
• 过滤逻辑不匹配：filter 回调的判断逻辑存在两处问题：一是如果 activeLabDetailsData 是对象数组，回调参数 name 实际是数组每一项的对象，直接和字符串相等判断永远返回false；二是对比的目标值错误，应该用用户输入的值匹配数组项对应的名称字段。
• 状态类型不一致：searchData 初始化时是数组类型 useState([])，但更新时传入了布尔值 true，类型不匹配会导致后续遍历 searchData 时抛出异常，应该把过滤得到的结果数组传给 setSearchData。
• 冗余async关键字：searchRecord 函数标记了async但内部没有await操作，属于无效语法，可直接移除。

修正后参考代码 #

const [searchData, setSearchData] = useState([]);
// 假设activeLabDetailsData的结构为 [{name: '实验室1', ...}, {name: '实验室2', ...}]
const searchRecord = (inputValue) => {
    // 加可选链避免activeLabDetailsData未加载完成时报错，无匹配数据时默认返回空数组
    const filteredResult = activeLabDetailsData?.filter(item => item.name.includes(inputValue)) || [];
    setSearchData(filteredResult);
}
<input 
    type="text" 
    onChange={(e)=> searchRecord(e.target.value)} 
    placeholder="Enter lab" 
    name="search2" 
/>

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