类型错误:Redux Action 不是一个函数

Question

我试图将一个redux操作(setMarker(调度到一个带有mapDispatchToProps的组件中，但是每当我调用该操作时，我都会得到这个

类型错误：setMarker 不是函数

import React from 'react';
import { connect } from 'react-redux';
import { setMarker } from '../../redux/map/map.actions';
import './suggestion.styles.scss';
const Suggestion = (location, { setMarker }) => {
const { area, city, address } = location;
return (
<div className="suggestion" onClick={() => console.log(setMarker)}>
<i className="fas fa-map-marker-alt fa-2x"></i>
<div className="address">
<h3 className="location-title">{`${area}, ${city}`}</h3>
<p className="location-desc">{address}</p>
</div>
</div>
);
};
const mapDispatchToProps = {
setMarker,
};
export default connect(null, mapDispatchToProps)(Suggestion);

我的操作文件包含以下代码

import mapActionTypes from './map.types';
export const setMarker = (location) => ({
type: mapActionTypes.SET_MARKER,
payload: location,
});

我的化简器文件包含以下代码

import mapActionTypes from './map.types';
const INITIAL_STATE = {
location: {
lat: 23.810331,
lng: 90.412521,
},
};
const mapReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case mapActionTypes.SET_MARKER:
return {
...state,
location: action.payload,
};
default:
return state;
}
};
export default mapReducer;

Answer 1

你需要像这样导入它：{ setMarker }这样它成为一个解构的道具

或者你可以做

const Suggestion = (props) => {

然后打电话

props.setMarker()

另外，如果您想要其他提示，您可以立即为mapDispatch执行此操作

const mapDispatchToProps = {
setMarker
}

更容易阅读:)

Answer 2

如果Suggestion是函数形式的反应组件，那么你将得到 props 作为参数。如果要直接访问对象解构语法，则应使用对象解构语法，也可以使用props.setMarker.

const Suggestion = ({location, setMarker}) => {
const { area, city, address } = location;
return (
<div className="suggestion" onClick={() => setMarker(location)}>
<i className="fas fa-map-marker-alt fa-2x"></i>
<div className="address">
<h3 className="location-title">{`${area}, ${city}`}</h3>
<p className="location-desc">{address}</p>
</div>
</div>
);
};