this.props不是函数（react.js）

Question

Have a code that delete element by request

class ArchOrDlt extends Component{
    constructor(props) {
      super(props)
    }

    deleteItem(itemId, e) {
        console.log(itemId);
      this.props.test();
      this.props.DeleteListProfileItem(itemId);

    }
    ArchOrDlt() {

      const isdel = this.props.isdel;
      const itemId = this.props.itemId;
      if (isdel == 1) {
        return (<div><a onClick={this.deleteItem.bind(this, itemId)} >delete</a></div>);
      }
        return (<div>archived</div>);
    }
    render() {
      return (
        <div>
        {this.ArchOrDlt()}
        </div>
      );
    }

  }

If I press link I get Uncaught TypeError: this.props.test is not a function

There I dispatch to props

const mapDispatchToProps = function(dispatch) {
  return {
      IncomeListProfile: () => dispatch(IncomeProfileList()),
      DeleteListProfileItem: (id) => dispatch(DeleteListProfileItem(id)),
      openPopUp: () => dispatch(openPopUp()),
      test: () => dispatch(test())
      }
  }

Can't Understand Why it's happen for exaple if I move this.props.test(); to another click, everything working fine, there full component https://plnkr.co/edit/OEugCIxoAGE8iVb57WOa?p=catalogue

Answer 1

First of all, you should use bindActionCreators function from redux

import { bindActionCreators } from 'redux';
...
const mapDispatchToProps = (dispatch) => {
  return {
    IncomeListProfile : bindActionCreators(IncomeProfileList, dispatch),
    ...
  }
}

http://redux.js.org/docs/api/bindActionCreators.html