Реагировать useState для изменения значка с помощью fontawesome не обновляется

#reactjs #font-awesome #use-state

Вопрос:

Я пытаюсь изменить значок, нажав на значок. Значение 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>

1. Можете ли вы отправить кодовое поле, пожалуйста. Потому что проблема определенно не в той части кода, которую вы отправили.

2. Лучше изменить код, зависит от состояния «isOpen», затем отобразить соответствующий значок с определенным именем класса

3. вот код и коробка codesandbox.io/embed/…

4. idk, почему на codesandbox работает, но на локальном развитии не работает

5. Да. Технически у вас там нет никаких проблем, так что это должно сработать.

Ответ №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>

Вот пример рабочей площадки.

1. это все еще не работает, вот мое репо github.com/shaddamalghafiqih/PersonalWebsite может быть, вам это нужно, этот код от src/parts/Header.js

2. Это работает. Может быть, у вас есть еще одна проблема, связанная с этим. Вот пример: codesandbox.io/s/fontawesome-5-playground-forked-wtz9e

Ответ №2:

исправлено, это потому, что я использую cdn fontawesome вместо пакета npm, когда я переключаюсь на пакет npm для fontawesome, он работает