调用 React 组件内的 useQuery 自定义钩子成功答案

【问题标题】：Call on Success of useQuery Custom hooks inside React components调用 React 组件内的 useQuery 自定义钩子成功
【发布时间】：2020-11-26 18:42:00
【问题描述】：

我在一个单独的文件夹中有一个自定义钩子，它是一个 useQUery 钩子。

export default function useFetchProfile(userId) {
  console.log("fetching profile");
  return useQuery(`profileInfo`, () => {
    return new Promise(async (resolve, reject) => {
      try {
xxxxxxxxx

}

我在一个 react 组件中使用这个钩子，并调用 onSuccess 函数如下。

const {
    data: profileUser,
    isLoading: isLoadingUser,
    refetch: refetchUser,
  } = useFetchProfile(props.match.params.userId, {
    onSuccess: (data) => {
      console.log("success");
    },
    onError: (err) => {},
  });

onSuccess 没有被调用。但是，如果我在钩子文件夹中调用 onSuccess，它就可以工作。我需要在组件本身内部调用 onSucess。知道代码有什么问题吗？

【问题讨论】：

标签： javascript reactjs callback react-hooks

【解决方案1】：

您实际上并没有将配置对象传递给useQuery：

// add config object to custom hook
export default function useFetchProfile(userId, config) {
  return useQuery(`profileInfo`, () => {
    return new Promise(async (resolve, reject) => {
      // use config.onSuccess / config.onError
    });
  });
}

【讨论】：