React Redux TypeError:this.props不是一个函数 [英] React Redux TypeError: this.props is not a function

问题描述

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

I've been pulling my hair out with this one and would really appreciate some help.

我遇到以下错误:

TypeError:this.props.getAgencies不是函数

TypeError: this.props.getAgencies is not a function

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

This is generated from the this.props.getAgencies() call in the component (componentDidMount).

代码如下所示

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;

推荐答案

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

So I changed import {CapitalProjectSearch} from "app/entities/primecpmsa/capital-project/capital-project-search";

到

从"app/entities/primecpmsa/capital-project/capital-project-search"导入CapitalProjectSearch；

import CapitalProjectSearch from "app/entities/primecpmsa/capital-project/capital-project-search";

，它奏效了.

这篇关于React Redux TypeError:this.props不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！