如何在useEffect()中结合自定义Hook实现链式API请求？

问题根源 #

• 你调用的fetchLocation是异步方法，JS不会等待它执行完成就会立即执行后续代码，且React的setState是异步更新，本次渲染周期内的location始终是初始值null，不可能拿到更新后的坐标。
• 你在useEffect中重复调用了自定义Hook useResults，违反了React Hook的调用规则（Hook只能在组件顶层或其他自定义Hook中调用），实际上你已经在组件顶层调用useResults拿到了请求方法fetchResults，直接调用该方法即可。

修复方案 #

修改你的组件逻辑如下即可：

const [fetchLocation, location, message] = useLocation()
const [fetchResults, searchResults, isSearchError] = useResults()

// 组件挂载时仅触发获取位置的逻辑
useEffect(() => {
  fetchLocation()
}, [fetchLocation])

// 监听location变化，位置获取成功后再触发搜索
useEffect(() => {
  // 必须判断location有值再执行搜索
  if (!location) return
  // 第一个参数传入你实际需要的搜索关键词即可
  fetchResults('你的搜索关键词', {
    latitude: location.coords.latitude,
    longitude: location.coords.longitude
  })
}, [location, fetchResults])

可选优化 #

可以配合message状态做加载提示，比如位置获取过程中给用户展示正在获取用户位置数据的提示，权限被拒绝或者获取失败时展示对应的报错信息，避免用户无感知等待。

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