javascript - 类型 'typeof C:/Users/pfftd/projectcrystal/src/actions/crystalActions' 的参数不可分配给类型 'ActionCreatorsMapObject' 的参数)

Question

在过去的 2-3 小时内一直试图解决这个问题。该应用程序从在浏览器上运行开始，并显示错误 this.props.fetchAPOD 不是一个函数(屏幕截图位于最底部)，但它显然在我的 Action 创建器中。另外，在我的容器中，它显示错误“当我将操作分配给mapDisPatchToProps时，“类型为'typeof“C:/Users/pfftd/projectcrystal/src/actions/crystalActions”的参数不可分配给类型为'ActionCreatorsMapObject'的参数”(这与我在 Microsoft 的 React/TypeScript Start-Kit 指南中看到的代码相同: 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 中，您有

从“./components/Crystal”导入 Crystal；

不应该吗

从 './containers/Crystal' 导入 Crystal；

看来您没有使用容器组件，而是使用了演示组件