React Native：使用 useCallback 避免无限循环答案

【问题标题】：React Native : Avoid infinite loop with useCallbackReact Native：使用 useCallback 避免无限循环
【发布时间】：2020-05-07 11:14:35
【问题描述】：

当主屏幕出现时，我正在尝试调度一个动作来感染 API，但我有一个无限循环。

我的项目：

React Native 应用程序
Redux
redux-axios-middleware
React Navigation（我正在使用抽屉）

我尝试了什么：

const dispatch = useDispatch();

useEffect(() => {
  const fetchNewMails = () => 
    return dispatch(ACTIONS.mailActions.fetchMails());
  };
  fetchNewMails();
}, [dispatch]);

-------

const dispatch = useDispatch();

const fetchNewMails = useCallback(() => {
  return dispatch(ACTIONS.mailActions.fetchMails());
}, [dispatch]);

useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    fetchNewMails();
  });

  return unsubscribe;
}, [fetchNewMails, navigation]);

一个简单的 console.log 不会产生无限循环，但调度动作是 ..

如果您有任何想法，请提前致谢。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

答案是针对我的项目的，但这里是：

我在 App.js 中根据 Redux 变量值显示了一个 LoadingScreen，它导致重新渲染。

解决方案：保持 LoadingScreen 独立并从 App.js 中删除。

问题已解决。

【讨论】：