Question

当保存在组件主体中时，以下代码工作正常。在 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，所以它会显示是否存在指向钩子的无效路径。

Answer 1

尝试以下操作。

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

  getUserSettings();
}, [getUserSettings]);

Answer 2

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

useEffect 中的异步自定义钩子

2 个答案: