React使用useState切换FontAwesome图标时状态更新但图标不变

问题原因 #

你当前使用的是Font Awesome的JS渲染版本，它会在页面初次加载时自动把所有匹配fa类名的<i>标签替换为SVG元素，后续你修改原<i>标签的className时，实际页面上已经不存在该DOM节点，因此状态更新不会触发图标切换。

解决方案 #

可以任选以下任意一种方式修复：

• 方案1（最稳定，推荐）：使用Font Awesome官方提供的React组件渲染图标
  先安装依赖：

  npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
  

  调整代码如下：

  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
  
  // 组件内的图标部分替换为
  <span
    className="text-blue text-2xl cursor-pointer"
    onClick={() => setIsOpen(!isOpen)}
  >
    <FontAwesomeIcon icon={isOpen ? faTimes : faBars} />
  </span>
  

• 方案2（改动最小）：给<i>标签绑定key属性，强制状态更新时重建DOM节点，触发Font Awesome重新渲染图标

  <i key={isOpen} className={!isOpen ? "fas fa-bars" : "fas fa-times"}></i>
  

• 方案3：切换为CSS版本的Font Awesome
  移除当前引入的Font Awesome JS脚本，改为引入Font Awesome的CSS样式文件，此时图标完全依赖className控制，不会自动替换<i>标签，修改className即可正常切换图标。

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