react-bootstrap-typeahead点击触发flushSync生命周期内调用报错

这个报错和你的组件写法、React状态管理知识掌握程度没有关系，纯粹是依赖版本兼容问题：

• 在线沙箱环境预装的React、react-bootstrap-typeahead版本是互相适配的，所以功能跑起来完全正常
• 本地项目基本都是用React 18，如果你装的react-bootstrap-typeahead版本低于v6.0.0，就会触发这个崩溃：旧版本组件内部在点击展开下拉的渲染生命周期里违规调用了flushSync，刚好撞在React 18的渲染阶段保护规则上，直接抛错崩页面。

你贴的测试组件写法完全符合该组件的受控使用规范：状态声明、onChange绑定、selected传值、labelKey和选项字段匹配全对，不用瞎怀疑自己的代码逻辑。

• 优先选升级依赖：直接把react-bootstrap-typeahead升到v6.0.0及以上版本就行，官方从这个版本开始做了React 18适配，专门修了这个flushSync调用时机错误的问题，升完你现在写的代码一行不用改就能正常用。
  跑对应包管理工具的命令即可完成升级：

  # 用npm的话
  npm install react-bootstrap-typeahead@latest
  # 用yarn的话
  yarn add react-bootstrap-typeahead@latest
  # 用pnpm的话
  pnpm add react-bootstrap-typeahead@latest
  

• 临时兜底方案：要是项目里其他依赖卡着版本，暂时升不了react-bootstrap-typeahead，就把本地React版本降到17.0.2，也能消掉这个报错，但不推荐长期这么搞，后续其他依赖升级会受限制。

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