Почему не меняется текст в React UseState

Question

Почему не меняется текст в React UseState

Рейтинг: 0Ответов: 1Опубликовано: 06.03.2023

Делаю веб-сайт на реакте и сейчас добавляю функцию смены языков, мне нужно чтобы менялось название языка с изначального на тот, который я выбрал.

Например: стоит язык "Русский", я хочу выбрать "English", название языка в навигации должно поменяться на "English".

Я использовал useState, при выводе переменных в консоль все отображается верно, но текст на кнопке не меняется.

Проблемы в languageButtonText

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const Navigation = () => {
  const [open, setOpen] = useState("false");
  let languageButtonText = "Русский";
  let [textLanguage, setTextLanguage] = useState(languageButtonText);

  function onSelect({ key }) {
    switch (key) {
      case "russian-language":
        setTextLanguage = "Русский";
        languageButtonText = setTextLanguage;
        console.log(languageButtonText);
        break;

      case "english-language":
        setTextLanguage = "English";
        languageButtonText = setTextLanguage;
        console.log(languageButtonText);
        break;

      case "kazakh-language":
        setTextLanguage = "Kazakh";
        languageButtonText = setTextLanguage;
        console.log(languageButtonText);
        break;
    }
  }

  const hamburgerMenu = (
    <FaBars className="bars" onClick={() => setOpen(!open)}></FaBars>
  );

  const closeMenu = (
    <RxCross2 className="cross-icon" onClick={() => setOpen(!open)}></RxCross2>
  );

  const menuCallback = () => (
    <Menu onSelect={onSelect}>
      <MenuItem key="russian-language" className="ru-item">
        <span class="fi fi-ru fis"></span> Русский
      </MenuItem>
      <MenuItem key="english-language" className="eng-item">
        <span class="fi fi-us fis"></span> English
      </MenuItem>
      <MenuItem key="kazakh-language" className="kz-item">
        <span class="fi fi-kz fis"></span> Қазақша
      </MenuItem>
    </Menu>
  );

  return (
    <div className="nav-container">
      <nav className="nav">
        <img className="logo" src={Logo} alt="logo"></img>
        <div className="navigation">
          <a className="link-main">Главная</a>
          <a
            href="http://ppk365.com/jinsaiyaoye/"
            target="_blank"
            className="link-verification"
          >
            Проверка на подлинность
          </a>
          <Dropdown
            trigger={["click"]}
            overlay={menuCallback}
            animation="slide-up"
          >
            <button
              onClick={() => console.log(languageButtonText)}
              className="language-button"
            >
              {languageButtonText}
              <FaCaretDown className="arrow-down"></FaCaretDown>
            </button>
          </Dropdown>
          <Link to="contact-screen" className="contact-button" smooth="true">
            Связаться с нами
          </Link>
        </div>
      </nav>
     </div>
  );
};

export default Navigation;

javascript html reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 1

Замените вывод текста не на начальное значение а на значение переменной состояния

Вместо languageButtonText надо textLanguage

Меняете это

let languageButtonText = "Русский";
let [textLanguage, setTextLanguage] = useState(languageButtonText);

на

let [textLanguage, setTextLanguage] = useState("Русский");

Так будет выглядеть кнопка

<button
className="language-button"
  >
  {textLanguage}
<FaCaretDown className="arrow-down"></FaCaretDown>
</button>

И в целом по тексту меняете значение на textLanguage

Почему так происходит?

Потому что это функциональный компонент и каждое изменение состояния приводит к тому, что функция отрабатывает заново и вы устанавливаете каждый рендер значение переменной languageButtonText = "Русский"

Почему не меняется текст в React UseState

Ответы