React JS实现autocomplete功能时显示[Object object]而非邮箱如何解决

核心错误原因 #

• 你在渲染建议列表的map方法中，箭头函数使用了花括号包裹JSX元素，但没有显式添加return语句，导致函数返回值为undefined。如果你之前出现过直接渲染suggestion对象而非suggestion.email的写法，就会直接输出[Object Object]。
• 你请求的https://reqres.in/api/users接口返回的用户数据结构本身包含email字段，字段调用没有问题。

修复代码 #

把原代码中渲染建议列表的部分：

{suggestions && suggestions.map((suggestion,i)=>{
    <div key={i}>{suggestion.email}</div>
})}

修改为以下两种写法任意一种即可：

写法1：使用箭头函数隐式返回（去掉花括号） #

{suggestions && suggestions.map((suggestion,i)=>
    <div key={i}>{suggestion.email}</div>
)}

写法2：显式添加return语句 #

{suggestions && suggestions.map((suggestion,i)=>{
    return <div key={i}>{suggestion.email}</div>
})}

可选优化点 #

• 邮箱匹配逻辑可以把user.email.match(regex)替换为regex.test(user.email)，性能更高，不需要返回匹配数组只需要判断是否匹配。
• 可以对用户输入的特殊字符做正则转义，避免输入.*?这类正则特殊字符时匹配异常。

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