React JS点击搜索建议传医生ID调用history.push跳转异常问题

问题根因 #

你为li绑定点击事件的写法存在错误：

// 错误写法
onClick={finddoctor(suggestion.id)}

这种写法会在组件渲染li节点时立即执行finddoctor函数，将函数的返回值（这里是undefined）绑定给onClick，而不是等到用户点击时才触发执行。只要你输入内容触发建议列表渲染，所有li对应的finddoctor都会被依次调用，就会出现你遇到的输入时自动跳转的问题。

修复方案 #

把onClick的赋值改成传递函数引用即可，只需修改li的onClick属性：

// 正确写法
onClick={() => finddoctor(suggestion.id)}

用箭头函数包裹原调用逻辑后，只有用户真实点击li节点时，才会执行箭头函数内部的finddoctor调用，不会在渲染阶段自动触发。

额外优化建议 #

• 你当前跳转路径写的是/detiled/${e} ，末尾多了个多余的空格，可能会导致路由匹配失败，建议删掉空格。如果是单词拼写错误，建议修正为/detail/或者/detailed/避免404。
• 建议将li的key属性从index改为suggestion.id，避免列表顺序变化时出现渲染异常。
• li外层包裹的空<></>没有实际作用，可以直接删掉。

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