TypeError：Redux Action 不是函数

Question

我试图用 mapDispatchToProps 将一个 redux 操作（setMarker）分派到一个组件中，但是每当我调用该操作时，我都会得到这个

TypeError: 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,
});

我的reducer文件包含以下代码

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.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>
  );
};