使用mapDispatchToProps分发Redux Action时遇TypeError: setMarker不是函数

这个错误的核心原因是你对React函数组件的props传递方式理解有误，咱们一步步理清楚：

问题所在 #

React函数组件的第一个参数是完整的props对象，你现在的写法：

const Suggestion = (location, { setMarker }) => { ... }

相当于把props当成了location，然后第二个参数（其实根本不存在）去解构setMarker，这就导致setMarker始终是undefined，自然会抛出"不是函数"的错误。

修复方案 #

把组件的参数改成正确的结构，从props对象里解构出location和setMarker：

修改后的组件代码 #

import React from 'react';
import { connect } from 'react-redux';
import { setMarker } from '../../redux/map/map.actions';
import './suggestion.styles.scss';

// 正确解构props里的location和setMarker
const Suggestion = ({ location, setMarker }) => {
  const { area, city, address } = location;
  return (
    <div 
      className="suggestion" 
      onClick={() => setMarker(location)} // 这里改成调用action，传入选中的位置数据
    >
      <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);

额外说明 #

• 你的Redux action和reducer代码是没问题的，错误只出在组件的props接收环节。
• 点击事件里替换成setMarker(location)后，才能把选中的位置数据传递给Redux store，完成状态更新。

内容的提问来源于stack exchange，提问作者Shamim Fahad