如何基于AsyncStorage的Promise返回值正确调用React请求Hook

问题根因 #

你遇到的所有报错核心都是违反了React Hook调用规则：Hook只能在React函数组件、自定义React Hook的最顶层作用域调用，不能放到异步回调、useEffect回调、条件分支、普通函数内部执行。

• 第一种方案问题：AsyncStorage.getID是异步操作，组件首次渲染时ID还是初始的undefined，所以传给useLoadRoot的是无效值；同时你直接在组件顶层调用AsyncStorage.getID，每次组件重渲染都会触发一次取ID操作，会产生冗余请求甚至内存泄漏。
• 第二种方案问题：React函数组件不能声明为async，async函数返回的是Promise而非React元素，本身就是不合法的组件写法。
• useEffect调用报错问题：你应该是把useLoadRoot写在了useEffect的回调内部，这属于非顶层调用Hook，自然会触发规则校验报错。

正确实现方案 #

第一步：改造请求Hook，支持无效参数跳过请求 #

你可以直接修改封装的UseLoadFromEndpoint，增加参数校验逻辑，当传入的ID为空时不发起请求，示例如下：

const UseLoadFromEndpoint = (url, params) => {
  const [data, setData] = useState()
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    // 新增校验：ID不存在时直接跳过请求
    if (!params?.id) return
    setLoading(true)
    axios.get(url, { params })
      .then(res => setData(res.data))
      .catch(e => console.log('请求失败', e))
      .finally(() => setLoading(false))
  }, [url, params])

  return { data, loading }
}

如果你是基于SWR/React Query封装的请求Hook，直接开启enabled配置即可，当enabled为false时会自动跳过请求。

第二步：组件内按规则调用Hook #

将Hook放在组件最顶层调用，用useEffect处理AsyncStorage取ID的逻辑，拿到ID后更新状态触发请求：

const MyScreen = () => {
  const [ID, setID] = useState()
  // Hook必须放在顶层调用，ID为空时内部自动跳过请求
  const { data, loading } = useLoadRoot(ID)

  useEffect(() => {
    let isMounted = true
    AsyncStorage.getID()
      .then(id => {
        // 加mounted标记防止组件卸载后更新状态导致内存泄漏
        if (isMounted) setID(id)
      })
      .catch(e => console.log('取本地ID失败', e))
    return () => isMounted = false
  }, [])

  // 加载态兜底展示
  if (loading || !ID) return <LoadingView />

  return <View>{/* 渲染业务内容 */}</View>
}

可复用封装方案 #

如果你需要在多个页面复用这个取本地ID再发起请求的逻辑，可以封装成自定义Hook：

// 自定义Hook，放在组件外部定义
const useLoadRootWithStorageId = () => {
  const [ID, setID] = useState()
  const res = useLoadRoot(ID)

  useEffect(() => {
    let isMounted = true
    AsyncStorage.getID()
      .then(id => isMounted && setID(id))
      .catch(e => console.log(e))
    return () => isMounted = false
  }, [])

  return { ...res, ID }
}

// 组件内直接调用即可
const MyScreen = () => {
  const { data, loading, ID } = useLoadRootWithStorageId()
  if (loading || !ID) return <LoadingView />
  return <View>{/* 业务逻辑 */}</View>
}

内容的提问来源于stack exchange，提问作者ztefanie