如何在类组件中使用useQuery hook？HOC传递返回data为undefined如何解决

问题根因 #

useQuery 是异步执行的网络请求，HOC 首次渲染类组件时，请求还未返回，因此 data 为 undefined。而类组件的 componentDidMount 生命周期仅在组件首次挂载完成后执行1次，此时请求还没有完成，自然拿不到返回的 data。另外注意你代码中传递props时存在拼写错误：loaging={loading} 应为 loading={loading}，该错误也会导致类组件无法正确拿到加载状态。

解决方案 #

方案1：配合 componentDidUpdate 生命周期监听数据变更 #

请求完成后 data 更新会触发组件重渲染，componentDidUpdate 会在每次props/state变更后执行，你可以在这里判断数据加载完成后执行对应逻辑：

class YourClassComponent extends React.Component {
  componentDidMount() {
    // 这里可以执行不需要依赖query data的逻辑，比如调用mutation
    // this.props.createUser(...)
  }

  componentDidUpdate(prevProps) {
    // 仅在加载完成、数据从无到有时执行逻辑，避免重复触发
    const { loading, data, error } = this.props;
    if (!prevProps.data && !loading && !error && data) {
      // 这里可以拿到完整的data执行对应逻辑
      console.log('拿到query数据：', data);
      // 如果你需要只执行一次，可以加个实例变量标记
      if (!this.hasDataFetched) {
        this.hasDataFetched = true;
        // 执行只需要跑一次的逻辑
      }
    }
  }

  render() {
    // 你的渲染逻辑
  }
}

该方案适合需要给用户展示加载态、需要兼容加载中交互的场景。

方案2：HOC 增加条件渲染，等数据加载完成后再渲染类组件 #

如果你需要保证 componentDidMount 执行时就已经拿到 data，可以在HOC中等待请求完成再渲染组件：

export function withMyHook(Component) {
  return function WrappedComponent(props) {
    const {loading, error, data} = useQuery(Queries.GET_All1);
    const [createUser, {err}] = useMutation(Mutations.CREATE_USER);

    const addUser = (user, queryFunc) => {
      queryFunc({
        variables:{
          country:user.country,
          city:user.city,
          message:user.message,
          isFriend:user.isFriend,
          url:user.url,
          name:user.name,
        }
      });
    }

    // 加载中可以渲染自定义加载态，有错误也可以优先渲染错误提示
    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求错误：{error.message}</div>;
    if (!data) return null;

    return <Component 
      {...props} 
      addUser={addUser} 
      loading={loading} 
      error={error} 
      data={data} 
      createUser={createUser} 
      err={err}
    />;
  }
}

这种方式下类组件挂载时请求已经完成，componentDidMount 中可以直接拿到 this.props.data。

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