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

【问题标题】：how to set react useState in useEffect and in window.addEventListener如何在 useEffect 和 window.addEventListener 中设置 react useState
【发布时间】：2020-02-14 03:01:18
【问题描述】：

我有 2 个状态变量，在页面加载时程序会检查是否有可用的代理，如果有，setDefault 状态变量设置为 true，然后如果触发了语言更改事件并且有可用的代理setStudio 设置为真，但是，当条件渲染完成时，默认值始终为 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>)

     )
    }

【问题讨论】：

这里的答案可能对你有帮助stackoverflow.com/questions/55565444/…
你怎么知道你的事件监听器被触发了？我建议添加更多日志记录，包括事件侦听器入口点。
您的代码在语法上看起来不正确。如果您的 addEventListener 缺少您的关闭 } 和 )，您是否没有在控制台中收到错误。您的缩进也是错误的，更正它会更明显。
return ({ defaultStudio ? 这看起来也不正确，你又没有收到任何错误，把{ 放在( 之后告诉JS 引擎启动一个对象文字.. 就做return defaultStudio ?而是..
@Keith，谢谢，我改了。

标签： javascript reactjs ecmascript-6

【解决方案1】：

您必须使用 removeEventListener

试试这个：

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

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

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

【讨论】：

【解决方案2】：

默认是javascript中的受保护关键字。

var default = 1;
SyntaxError: missing variable name

用于标识默认导出模块。 export default myComponent; 重命名变量应该可以解决这个问题。 ?

【讨论】：

【解决方案3】：

我刚刚修复了它，为了以后参考，我不得不从useEffect中取出[default, studio, i18n.language]。

【讨论】：