来自 useEffect 的异步自定义钩子答案

【问题标题】：Async custom hook from within useEffect来自 useEffect 的异步自定义钩子
【发布时间】：2021-07-01 21:26:31
【问题描述】：

当保存在组件主体中时，以下代码可以正常工作。在 useEffect 内部，它检查 asyncstorage 并分派一个动作（该函数更长，但函数中的其他检查/分派属于同一类型 - 检查 asyncstorage，如果值存在，则分派一个动作）

useEffect(() => {
    const getSettings = async () => {
      const aSet = await AsyncStorage.getItem('aSet');

      if (aSet) {
        dispatch(setASet(true));
      }
    };

    getSettings();
  }, [dispatch]);

我正在尝试将其移至自定义挂钩，但遇到了问题。自定义钩子是：

const useGetUserSettings = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    const getSettings = async () => {
      const aSet = await AsyncStorage.getItem('aSet');

      if (aSet) {
        dispatch(setASet(true));
      }
    };

    getSettings();
  }, [dispatch]);
};

export default useGetUserSettings;

然后在我想调用上面的组件中，我这样做：

import useGetUserSettings from './hooks/useGetUserSettings';
...
const getUserSettings = useGetUserSettings();
...
useEffect(() => {
  getUserSettings();
}, [getUserSettings])

它返回一个错误：

getUserSettings 不是函数。（在 'getUserSettings()' 中，'getUserSettings' 是未定义的

我一直在阅读钩子规则并浏览互联网上的示例，但我可以让它工作。我已经设置了 ESlint，所以它会显示是否存在无效的钩子路径。

【问题讨论】：

标签： react-native async-await react-hooks

【解决方案1】：

试试下面的。

useEffect(() => {
  if (!getUserSettings) return;

  getUserSettings();
}, [getUserSettings]);

【讨论】：

我希望每次屏幕呈现时都运行挂钩。正如另一个答案指出的那样，我的钩子不返回任何东西（也不打算返回任何东西，只是执行里面的代码）。因此，您的回答并没有真正解决问题。不过还是谢谢。
“我希望每次屏幕渲染时都运行该挂钩” - 只需将一个空的依赖数组传递给您的效果挂钩（自定义挂钩中的那个）。

【解决方案2】：

钩子不返回任何东西，所以返回值未定义也就不足为奇了；）

【讨论】：

谢谢。但是在这种情况下它应该返回什么？我只想运行里面的代码（异步查询和潜在的动作调度）？
如果你不想让它返回任何东西，你可以调用 useGetUserSettings();