javascript - 类型 上不存在属性 `data` | AxiosHttpResponse<任何>

Question

我有一个 promise ，当我为特定用户获取数据时，我会使用它来设置状态。以下是相关代码:

getUserUsername = (): string => {
    const { match } = this.props;
    return match.params.username;
  };

  onFetchUser = () =>
    getUser(this.getUserUsername())
      .then(username => {
        if (this.hasBeenMounted) {
          this.setState({
            user: username.data // The error is here.
          });
        }
      })
      .catch((errorResponse: HttpResponseObj | null = null) => {
        if (this.hasBeenMounted) {
          this.setState({
            isLoading: false,
            user: null,
            errorMessage: errorResponse
          });
        }
      });

但是我得到这个 TS 错误:

Property 'data' does not exist on type 'void | AxiosResponse<IUser>'.
  Property 'data' does not exist on type 'void'.ts(2339)
---
any

getUser() 是我使用的服务，它的代码在这里:

export const getUser = (username: string, initialOptions = {}): HttpResponse<IUser> => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(username)
  };
  return Instance(options, lensesOptions);
};

HttpResponse 的代码在这里:

export interface HttpResponse<T> extends Promise<void | AxiosResponse<T>> {}

我试过类似的方法:

      .then((username): HttpResponse<any> => { // Doesn't work though
        if (this.hasBeenMounted) {
          this.setState({
            user: username.data
          });
        }
      })

这是 Axios 界面:

export interface AxiosResponse<T = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

你能给我解释一下问题是什么吗？我转到 axios 接口(interface)，我看到它 data，还有 generic 没问题。谢谢!!

Answer 1

在尝试使用它之前，您必须检查 username 的类型，因为该函数返回两个具有不同属性的值(void 和 AxiosResponse)

所以你必须这样检查:

  .then(username => {
    // Check if it is not void
    if (this.hasBeenMounted && username ) { 
      this.setState({
        user: username.data
      });
    }
  })