Question

我有2个状态变量，在页面加载时，程序检查是否有可用的代理，如果是，则将setDefault状态变量设置为true，然后触发语言更改事件并且有可用的代理setStudio设置为true，但是，当条件渲染完成时，默认值始终为true，即使我在eventListener触发时将其设置为false，谁能看到我在做什么错。

任何帮助将不胜感激。

 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

您必须使用 removeEventListener

尝试一下：

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

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

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

Answer 3

我刚刚修复了它，仅供以后参考，我不得不从useEffect中删除[default，studio，i18n.language]。

如何在useEffect和window.addEventListener中设置react useState

3 个答案: