React Redux TypeError:this.props不是一个函数
我一直在用这种方法拔头发,非常感谢您的帮助.
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";
,它奏效了.