Question

我有一些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)
      }
    })();
  }, []);

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

Answer 1

您必须提到依赖项数组作为useEffect()钩子的第二个参数，以告诉React您何时需要运行useEffect。默认情况下，react将在每个组件渲染/更新上运行useEffect。

因此，如果您遇到无限循环，则可能是您的依赖项数组不合适。本质上，您会遇到useEffect将运行，更新组件中的某些内容，这将触发重新渲染，然后useEffect将再次运行并且此循环将不断重复的情况。

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

Answer 2

您可以将值作为第二个参数传递，以便在该值更改时将其呈现。例如：

useEffect(() => {}, [state])

每次出现屏幕时都使setState在useEffect中

2 个答案: