React useState 使用 fontawesome 更改图标不更新

Question

我正在尝试通过单击图标来更改图标。 isOpen 的值在控制台发生变化，但图标没有变化。

const [isOpen, setIsOpen] = useState(false);

<header className="w-full h-20 shadow-sm">
    <div className="h-full sm:mx-6 md:mx-12 lg:mx-24 xl:mx-48 px-4 xl:px-0">
      <nav className="h-full flex justify-between items-center text-lg">
        <div className="flex items-center">
          <p className="font-bold text-blue z-10">Shaddam</p>
          <figure className="-ml-4 z-0">
            <img src={BrandIconBg} alt="Blob" />
          </figure>
        </div>
        <span
          className="text-blue text-2xl cursor-pointer"
          onClick={() => setIsOpen(!isOpen)}
        >
          <i className={!isOpen ? "fas fa-bars" : "fas fa-times"}></i>
        </span>
      </nav>
    </div>
  </header>

Answer 1

试着改变你的逻辑。此问题背后的原因是图标未显示，因为当您的更改生效时，您的本地开发环境或浏览器未呈现新图标。

const [isOpen, setIsOpen] = useState(false);

<header className="w-full h-20 shadow-sm">
    <div className="h-full sm:mx-6 md:mx-12 lg:mx-24 xl:mx-48 px-4 xl:px-0">
      <nav className="h-full flex justify-between items-center text-lg">
        <div className="flex items-center">
          <p className="font-bold text-blue z-10">Shaddam</p>
          <figure className="-ml-4 z-0">
            <img src={BrandIconBg} alt="Blob" />
          </figure>
        </div>
        <span
          className="text-blue text-2xl cursor-pointer"
          onClick={() => setIsOpen(!isOpen)}
        >
          {isOpen ? 
          <i className="fas fa-bars"></i> :
          <i className="fas fa-times"></i>}
        </span>
      </nav>
    </div>
  </header>

Here 是工作场示例。

Answer 2

已修复，这是因为我使用 fontawesome cdn 而不是使用 npm 包，当我更改为 npm 包以使其正常工作时