反应Redux TypeError:this.props不是函数

时间:2019-12-19 07:22:43

标签: reactjs react-redux react-router jhipster react-props

我一直在用这种方法拔头发,非常感谢您的帮助。

我遇到以下错误:

TypeError:this.props.getAgencies不是函数

这是通过组件(componentDidMount)中的this.props.getAgencies()调用生成的。

代码如下所示

capital-project-search.tsx

import React from 'react';
import {connect} from 'react-redux';
import {RouteComponentProps} from 'react-router-dom';
import {getAgencies} from './capital-project-search.reducer';

export interface ICapitalProjectSearchProps extends DispatchProps, RouteComponentProps<{ url: string }> {}
export type ICapitalProjectSearchState = {
}

export class CapitalProjectSearch extends React.Component<ICapitalProjectSearchProps, ICapitalProjectSearchState> {
  state: ICapitalProjectSearchState = {
  };
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.props.getAgencies();
  };
  componentWillUnmount(): void {
  }
  render() {
    return (
      <div>
        <p>Test</p>
      </div>
    );
  }
}

const mapDispatchToProps = {
  getAgencies
};

type DispatchProps = typeof mapDispatchToProps;

export default connect(
  null,
  mapDispatchToProps
)(CapitalProjectSearch);

capital-project-search.reducer.ts

import axios from 'axios';
import {FAILURE, REQUEST, SUCCESS} from 'app/shared/reducers/action-type.util';
import {DropDownType} from "app/entities/primecpmsa/capital-project/capital-project-common";

export const ACTION_TYPES = {
  FETCH_AGENCIES: 'capitalProjectSearch/FETCH_ACENCIES',
};

const initialState = {
  errorMessage: null,
  agencies: [] as Array<DropDownType>
};

export type CapitalProjectSearchState = Readonly<typeof initialState>;

// Reducer
export default (state: CapitalProjectSearchState = initialState, action): CapitalProjectSearchState => {
  switch (action.type) {
    case REQUEST(ACTION_TYPES.FETCH_AGENCIES):
      return {
        ...state,
        errorMessage: null
      };
    case FAILURE(ACTION_TYPES.FETCH_AGENCIES):
      return {
        ...state,
        errorMessage: action.payload
      };
    case SUCCESS(ACTION_TYPES.FETCH_AGENCIES):
      return {
        ...state,
        agencies: action.payload.data
      };
    default:
      return state;
  }
};

const gEntityApiUrl = 'services/cpmsa/api/g-entities';

// Actions
export const getAgencies = () => {
  return ({
    type: ACTION_TYPES.FETCH_AGENCIES,
    payload: axios.get(gEntityApiUrl)
  });
};

index.tsx

import React from 'react';
import {Switch} from 'react-router-dom';

import ErrorBoundaryRoute from 'app/shared/error/error-boundary-route';
import CapitalProjectDeleteDialog from './capital-project-delete-dialog';
import {CapitalProjectSearch} from "app/entities/primecpmsa/capital-project/capital-project-search";

const Routes = ({ match }) => (
  <>
    <Switch>
      <ErrorBoundaryRoute exact path={`${match.url}/search`} component={CapitalProjectSearch} />
    </Switch>
    <ErrorBoundaryRoute path={`${match.url}/:key/delete`} component={CapitalProjectDeleteDialog} />
  </>
);
export default Routes;

3 个答案:

答案 0 :(得分:0)

您的代码:

from platform import python_version

print(python_version())

应该像

const mapDispatchToProps = {
  getAgencies
};

这可能是因为功能的ES6语法错误

答案 1 :(得分:0)

const mapDispatchToProps = {
  getAgencies
};

括号

中包装返回对象
const mapDispatchToProps = () => ({
  getAgencies
});

答案 2 :(得分:0)

所以我改变了 从“ app / entities / primecpmsa / capital-project / capital-project-search”导入{CapitalProjectSearch};​​

从“ app / entities / primecpmsa / capital-project / capital-project-search”导入CapitalProjectSearch;

成功了。