时间戳

首页 > 解决方案 > 每次屏幕出现时在useEffect中设置setState

reactjs - 每次屏幕出现时在useEffect中设置setState

问题描述

我有一些 useEffect 功能，该功能在组件首次出现时起作用：

useEffect(() => {
    (async function () {
      try {
        console.log('works');
        const token = await AsyncStorage.getItem('token');
        if (token)
          setState({...state, isAuthorized: true})
      } catch (error) {
        console.log(error)
      }
    })();
  }, []);

但是，如果我从参数中删除空数组，如何让它每次都工作而不调用无限循环？

标签： reactjsreact-nativereact-hooks

解决方案

你必须提到依赖数组作为useEffect()hook 的第二个参数来告诉 React 什么时候需要useEffect运行。默认情况下，react 将useEffect在每个组件渲染/更新上运行。

因此，如果您遇到无限循环，则您的依赖数组可能不正确。您实际上遇到了 useEffect 将运行的情况，更新组件中的某些内容，这将触发重新渲染，然后 useEffect 将再次运行，并且此循环将无限重复。

useEffect我不认为在使用钩子时不会提及依赖数组的任何用例。始终建议将依赖项列表作为数组提到useEffecthook 的第二个参数，或者如果没有任何依赖项，则必须传递一个空数组。这应该可以防止在您的应用程序中发生无限循环/重新渲染。

推荐阅读