Question

我在我的容器上调度了2个动作，但是它一直得到这个.props.mostrarProduto（）和this.props.esconderProduto（）不是一个函数。目标是进行鼠标悬停操作以显示和隐藏组件。

由于

容器菜单

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { mostrarProduto } from '../actions/index';
import { esconderProduto } from '../actions/index';

class Menu extends Component{

render(){
    return (
        <div onMouseOver={this.props.mostrarProduto()} onMouseLeave={this.props.esconderProduto()}>
          <ul>
              <li><a href="#">Link 1</a></li>
          </ul>
        </div>
    )
  }

}

function mapDispatchToProps(dispatch) {

return bindActionCreators({mostrarProduto, esconderProduto}, dispatch);
}

export default connect(null, mapDispatchToProps)(Menu);

行动指数

function mostrarProduto(){
    return {
        type: 'SHOW_PRODUCT'
    }
}

function esconderProduto(){
    return {
        type: 'HIDE_PRODUCT'
    }
}

产品减速机

const productReducer = (state = false, action) => {
  switch (action.type) {
    case 'SHOW_PRODUCT':
      return true;
    case 'HIDE_PRODUCT':
      return false;
    default:
      return state;
  }
}

减速机指数

import { combineReducers } from 'redux';
import Produtos from './texto_produto';

const rootReducer = combineReducers({
    textoProdutos : Produtos
});

export default rootReducer;

Answer 1

您根本没有导出操作。您正在使用命名导入，因此代码应如下所示：

export function mostrarProduto(){
    return {
        type: 'SHOW_PRODUCT'
    }
}

export function esconderProduto(){
    return {
        type: 'HIDE_PRODUCT'
    }
}

React - Redux - Dispatch Action Error，this.props.mostrarProduto不是一个函数

1 个答案: