使用react-icons库时点击或包裹图标触发TypeError: t.substring is not a function错误求助

嘿，我看你在使用react-icons时碰到了这个棘手的报错，我之前也遇到过类似的问题，咱们来一步步排查解决：

首先先看你代码里的一个明显小问题：你写的< BsPalette />标签里有个多余的空格，JSX标签的开头不能有空格，应该改成<BsPalette />——这个空格很可能会导致React解析组件时出现异常，直接触发这个奇怪的报错，先把这个改了试试！

如果改完空格还是不行，那可以试试下面这些方案：

• 检查版本兼容性
  有时候react-icons的新版本和你的React版本不匹配会导致这类奇怪的运行时错误。你可以先卸载当前的react-icons，然后安装一个稳定的兼容版本：

  npm uninstall react-icons
  npm install react-icons@4.10.1
  

  这个版本对React 17和18都适配得不错，你可以试试。

• 排查全局事件冲突
  看看你的项目里有没有全局注册的点击事件、事件委托逻辑，这些逻辑里如果有调用substring方法，但处理的不是字符串类型的值，当点击图标时触发了这个事件，就会抛出这个错误。你可以暂时注释掉全局事件代码，测试是否还会报错。

• 检查图标包裹的写法
  如果你要把图标放在按钮里，确保按钮的事件处理逻辑没有问题，比如正确的写法应该是这样：

  <button onClick={() => setIsOpen(true)}>
    <BsPalette />
  </button>
  

  不要给图标本身绑定不必要的事件，同时检查事件处理函数里有没有对非字符串变量调用substring的情况。

先从最明显的标签空格问题入手修改，应该能解决大部分情况，如果还是不行再试其他方案~

内容来源于stack exchange