javascript - 类型 'data' 上不存在属性 'AxiosResponse<any> | undefined'

Question

我的操作抛出错误:

// ACTIONS
export const startGetPrices = () => (dispatch: any) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res; // <-- error highlighted data
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

在同一个文件中，我有以下接口(interface):

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

在我使用该接口(interface)的组件中:

import React from 'react'
import { connect } from 'react-redux'

import { startGetPrices, IPricesRes } from '../store'
import { CurrencySelector, Header, Prices, Navigation } from '../components'

interface IProps {
  fiatPrices: [];
  startGetPrices(): IPricesRes; // <-- the res interface
}

class FiatWallet extends React.PureComponent<IProps> {
  componentDidMount() {
    console.log('FiatWallet componentDidMount...');
    this.props.startGetPrices();
  }

  public render() {
    const { fiatPrices } = this.props;
    return (
      <section>
        <CurrencySelector />
        <Header />
        <Prices prices={fiatPrices} />
        <Navigation />
      </section>
    );
  }     
}

const mapDispatchToProps = (dispatch: any) => ({
  startGetPrices: () => dispatch(startGetPrices())
});

const mapStateToProps = (state: any) => ({
  fiatPrices: state.fiatPrices,
  wallets: state.fiatPrices,
  defaultCurrency: state.defaultCurrency
});

export const BoardJest = FiatWallet;

export default connect(mapStateToProps, mapDispatchToProps)(FiatWallet);

它告诉我类型 AxiosResponse<any> 上不存在数据我的问题是如何正确输入？

我在哪里使用 IPricesRes和 IPriceData ？

---

我的整个 store.ts 文件:

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunkMiddleware from 'redux-thunk'

import { getLatest } from './services/api'

export interface IinitialState {
  fiatPrices: [];
  wallets: [];
  defaultCurrency: string;
}

export interface IPricesRes {
  data: IPriceData
}

export interface IPriceData {
  base: string;
  date: string;
  rates: any;
  success: boolean;
  timestamp: number;
}

const initialState = {
  fiatPrices: [],
  wallets: [],
  defaultCurrency: ''
}

// ACTION TYPES
export const actionTypes = {
  GET_PRICES: 'GET_PRICES'
}

// REDUCER
export const reducer = (state = initialState, action: any) => {
  switch (action.type) {
    case actionTypes.GET_PRICES: {
      const { rates } = action;
      return {
        ...state,
        fiatPrices: rates
      };
    }

    default:
      return state;
  }
}

// ACTIONS CREATORS
export const actionGetPrices = (data: any) => ({
  type: actionTypes.GET_PRICES,
  assets: data
});

// ACTIONS
export const startGetPrices = () => (dispatch) => getLatest().then((res) => {
  console.log('res', res);
  const { data } = res;
  const { rates } = data;
  dispatch(actionGetPrices(rates));
});

// @ts-ignore
export function initializeStore(initialState: IinitialState = initialState) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware(thunkMiddleware))
  )
}

服务/API 其中 getLatests()是:

import axios from 'axios'

const fixerAPI = 'http://data.fixer.io/api/';
const fixerKey = '25a1ad0f5f253du7131b68cd1...';

export const getLatest = async () => {
  const fixer = axios.create({
    baseURL: fixerAPI,
    params: {
      // base: 'USD',
      access_key: fixerKey
    }
  });

  try {
    const prices = await fixer.get('latest');
    return prices;
  } catch (err) {
    console.error(err);
  }
}

Answer 1

我能够通过添加一个 converter.ts util 来绕过这个错误，但是如果有更好的答案请发帖加分!

// ACTIONS

export const startGetPrices = () => (dispatch: any) => getLatest().then((res) => {
  const ratesArray = converters.ratesIntoArray(res);
  dispatch(actionGetPrices(ratesArray));
});

// utils/converters.ts

// Takes rates { key : value } pairs and converts into Array.
export const ratesIntoArray = ({ data: { rates } }: any) =>
  Object.keys(rates).map(data => [data, rates[data]]);