React组件找不到mapDispatchToProps Redux函数

Question

我无法更新mapDispatchToProps函数。控制台错误为this.props.addPassFilePath is not a function，请参阅随附的代码和图像。如何解决这个错误？

Reactjs组件在changeValue函数中引发错误。它会打印this.props.addPassFilePath不退出。

import React from "react";
import { connect } from "react-redux";
import { addPassFilePath} from "../../../state/actions/index";


const mapDispatchToProps = dispatch => {
  return {
    passFilePath: passFilePath => dispatch(addPassFilePath(passFilePath))
  };
};


/**
 *  Lists file names from get request
 */
class FileListingClass extends React.Component {
  constructor() {
    super();
    this.changeValue = this.changeValue.bind(this);
  }


  /**
   *  Onclick value gets passed to this method
   *  it will then add it to the redux store 
   *  array called `passFilePath`
   */
  changeValue = (data) => (e) => {
    this.props.addPassFilePath({ data });
    //this.addPassFilePath({ data });
    //addPassFilePath({ data });

  }


  /**
   * Rendering html
   */
  render() {
    const data = this.props.listOfObjects;
    const dataArrayList = data.map(dataObj => {
      return (
        <li key={dataObj.id}>
          <span onClick={this.changeValue(dataObj.default_path)}>{dataObj.file_name}</span>
        </li>
      );
    });

    return (
      <ul>
        {dataArrayList}
      </ul>
    )
  }

}

const FileListing = connect(null, mapDispatchToProps)(FileListingClass);
export default FileListing;

我不认为Redux行动会导致此问题。但是以防万一，这是我设置的。

import { 
    ADD_ARTICLE,  
    PASS_FILE_PATH 
  } from "../constants/action-types";

export const addArticle = article => (
    { type: ADD_ARTICLE, payload: article }
);

export const addPassFilePath = passFilePath  => (
    { type: PASS_FILE_PATH, payload: passFilePath }
);

此图像在控制台中显示错误。

Answer 1

您正在将命名函数passFilePath映射到mapDispatchToProps对象中。您需要在组件FileListingClass中使用此给定名称进行调用。例如：

changeValue = (data) => (e) => {
   this.props.passFilePath({ data });
}