React自动补全组件正则过滤返回对象而非字符串，显示[object Object]异常

得到对象结构的suggestions完全是数组方法的固有行为导致的：

• Array.filter() 仅负责从原数组中筛选符合条件的元素，不会改变元素本身的结构。传入的props.autoCompTxt是{name, id}结构的对象数组，filter执行完返回的自然也是同结构的对象集合，不会自动提取目标name字段。
• 控制台输出的[object Object],[object Object]，是因为打印时使用了字符串拼接的写法（'Suggestions: ' + suggestions），JS会将数组内的对象强制转为字符串，才会出现这个显示结果。
• 之前尝试在filter的判断逻辑里用模板字符串、JSON.stringify处理，这些操作仅作用于正则匹配的判断环节，完全没有改变filter最终返回的元素结构，因此无法生效。

1. 调整筛选逻辑提取目标字段 #

替换原有问题代码，在筛选后补充字段映射环节：

// 原问题代码
suggestions = props.autoCompTxt.sort().filter(v => regex.test(v.name));

// 修复后代码
suggestions = props.autoCompTxt
  .slice() // 拷贝原数组，避免sort方法直接修改props传入的原数组，触发React状态副作用
  .sort((a, b) => a.name.localeCompare(b.name)) // 为对象数组指定基于name字段的排序规则，原无参数sort对对象数组无实际排序效果
  .filter(v => regex.test(v.name))
  .map(v => v.name); // 新增映射步骤，提取每个匹配对象的name为字符串

2. 修正控制台打印逻辑 #

将字符串拼接的打印方式改为多参数传值打印，避免对象被强制转成无意义的字符串：

// 原问题代码
console.log('Suggestions: ' + suggestions);

// 修复后代码
console.log('Suggestions: ', suggestions);

3. 原有逻辑自然适配 #

调整完成后，suggestions数组存储的就是纯name字符串，现有组件逻辑不需要额外改动：

• renderSuggestions中直接渲染item即可正常显示补全选项文本
• 用户点击选中项时，suggestionSelected拿到的就是选中的名称字符串，直接传给父组件的onChange方法即可满足需求

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