как установить реакцию useState в useEffect и в window.addEventListener

Question

У меня есть 2 переменные состояния, при загрузке страницы программа проверяет, есть ли доступный агент, и если да, переменная состояния setDefault установлена ​​в значение true, а затем, если происходит событие изменения языка и есть доступный агентsetStudio устанавливается в true, однако, когда условный рендеринг выполняется, по умолчанию всегда устанавливается значение true, даже если я установил его в false в срабатывании eventListener, кто-нибудь может увидеть, что я делаю неправильно.

любая помощь будетценится.

 const Home = ({ t, i18n, history }) => {
     const [defaultStudio, setDefaultStudio] = useState(false);
     const [studio, setStudio] = useState(false);

     useEffect(() => {

       checkForAvailableAgent(LINK_TO_AGENT)
        .then(res => {
          setDefaultStudio(res);
        })
        .catch(error => {
          console.log("an error happened.");
        });

        window.addEventListener("langChange", () => {
          if(i18n.language === "en") { 
            checkForAvailableAgent(LINK_TO_AGENT)
             .then(res => {
               setStudio(res);
               setDefaultStudio(false);
            })
          .catch(error => {
             console.log("an error happened.");
          });
        } else {
          setStudio(false);
          setDefaultStudio(false);
        }
      });

     },[defaultStudio, studio, i18n.language]);



    return (
      defaultStudio ? 
       (<Button>Call live</Button>)
       : 
       (<Button>Call</Button>)

     )
    }

Answer 1

По умолчанию используется защищенное ключевое слово в javascript.

var default = 1;
SyntaxError: missing variable name

Используется для идентификации модуля экспорта по умолчанию. export default myComponent; Переименование вашей переменной должно решить эту проблему. ?

Answer 2

Я только что исправил это, просто для дальнейшего использования, мне пришлось вынуть [default, studio, i18n.language] из useEffect.

Answer 3

Вы должны использовать removeEventListener

Попробуйте это:

const handleUserlangChange = useCallback(event => {
    // do somethings
}, []);

useEffect(() => {
    window.addEventListener('langChange', handleUserlangChange);
    return () => {
      window.removeEventListener('langChange', handleUserlangChange);
    };

},[default, studio, i18n.language]);