类型为C的类型的参数：/ Users / pfftd / projectcrystal / src / actions / crystalActions＆＃39;不能分配给＆＃39; ActionCreatorsMapObject＆＃39;）类型的参数

Question

过去2-3小时一直试图解决这个问题。 该应用程序从浏览器上运行开始，并显示this.props.fetchAPOD不是函数的错误（截至远处的屏幕截图），但它显然是在我的动作创建者中。同样在我的容器中它表示错误＆＃34;类型＆＃34; typeof＆＃34; C：/ Users / pfftd / projectcrystal / src / actions / crystalActions＆＃34;＆＃39;不能分配给＆＃39; ActionCreatorsMapObject＆＃39;类型的参数。当我将操作分配给mapDisPatchToProps时（这与我在Microsoft的反应/打字稿开始工具包指南中看到的完全相同的代码：https://github.com/Microsoft/TypeScript-React-Starter

这是我的代码：

容器Crystal.tsx

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Crystal from '../components/Crystal';
import * as actions from '../actions/crystalActions';
import {
  ApodSTATE
} from '../types';

export function mapStateToProps({ APOD }: ApodSTATE ) {
  return {
    APOD
  };
}

export function mapDispatchToProps( dispatch: any ) {
  return bindActionCreators( actions, dispatch );
}

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

App.tsx （包含商店和提供商的文件）

import * as React from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';

import allReducers from './reducers';
import Crystal from './components/Crystal';
// import { ApodSTATE } from './types';

const logger = createLogger({
  level: 'info',
  collapsed: true
});

const store: any = createStore(allReducers, applyMiddleware(thunk, logger));


class App extends React.Component<any, any> {
  render() {
    return (
      <Provider store={store}>
        <Crystal />
      </Provider>
    );
  }
}

export default App;

crystalActions.tsx

export const FETCH_APOD = 'FETCH_APOD';
export type FETCH_APOD = typeof FETCH_APOD;
export interface FetchApod { type: FETCH_APOD };

export const fetchAPOD = () => {
  return ( dispatch: any ) => {
    dispatch({
      type: FETCH_APOD
    });
  };
};

类型（index.tsx）

export interface TableName {
  TableName: string;
}

export interface ApodACTIONS {
  type: string;
  fetchAPOD?: () => {};
};

export interface ApodSTATE {
  APOD: {};
}

export enum actionTypes {
  FETCH_APOD
}

组件Crystal.tsx

import * as React from 'react';
// import { ApodSTATE } from '../types';


class Crystal extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.printTest = this.printTest.bind(this);
  }
  componentDidMount() {
    this.printTest();
    this.props.fetchAPOD();
  }
  printTest() {
    setTimeout(() => {
      console.log(this.props);
    }, 1500);
  }

  render() {
    return (
      <div>
        <h2>Project Crystal initiation</h2>
        <h3>Test</h3>
      </div>
    );
  }
}

export default Crystal;

仔细观察的屏幕截图：

Answer 1

您是否正在导入正确的组件？在App.tsx中你有

import Crystal from './components/Crystal';

不应该

import Crystal from './containers/Crystal';

看起来你没有使用容器组件，而是使用表示的