React自定义Hook嵌套场景：如何通过函数获取Hook返回结果

先看你给出的原代码：

const fun = () => { 
  const result = useCustomHook() 
  console.log(result) 
}

const useCustomHook = () => { 
  const res = useNestCustomHook() 
  console.log(res) 
}

当前的问题很明确：useCustomHook虽然调用了useNestCustomHook，但并没有把后者的返回值纳入自身的返回结果里，导致fun函数中拿到的result完全看不到嵌套Hook的内容。

要解决这个问题，只需要让useCustomHook把嵌套Hook的返回值和自身逻辑的结果一起返回即可，具体分两种情况：

情况1：需要同时保留自定义Hook自身结果和嵌套Hook结果 #

修改useCustomHook，返回一个合并后的对象，把嵌套Hook的结果作为属性包含进去：

const useCustomHook = () => {
  const nestRes = useNestCustomHook()
  // 这里写useCustomHook自身的业务逻辑，生成自定义结果
  const customResult = {
    customData: 'some value'
  }

  // 返回合并后的结果
  return {
    ...customResult,
    nestRes // 把嵌套Hook的结果单独作为一个属性
  }
}

此时调用fun就能拿到完整结果：

const fun = () => {
  const result = useCustomHook()
  console.log('自定义Hook自身结果:', result.customData)
  console.log('嵌套Hook返回结果:', result.nestRes)
}

情况2：自定义Hook基于嵌套Hook的结果做扩展 #

如果useCustomHook的核心是对useNestCustomHook的结果做加工，直接返回加工后的对象（包含原嵌套结果）即可：

const useCustomHook = () => {
  const nestRes = useNestCustomHook()
  
  // 在嵌套Hook结果基础上添加自定义内容
  return {
    ...nestRes,
    extraInfo: '自定义扩展的信息'
  }
}

这样fun里拿到的result会包含useNestCustomHook的所有返回字段，再加上自定义的扩展内容。

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