Javascript 反应+；雷杜。执行容器和转储组件中定义的所有方法/操作

当转储组件和容器中定义的所有方法都被执行时，我面临着一种奇怪的情况。 这是一个组件： 容器：

    import React,{Component, PropTypes} from 'react';
import { connect , Provider} from 'react-redux'
import { toggleMenu } from '../actions/'
import Menu from '../components/Menu'


function mapStateToProps (state) {
  var isOpenMenu = state.pageReducer.isOpenMenu != undefined ? state.pageReducer.isOpenMenu: true;
  return {isOpenMenu}
}
function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory :  dispatch(toggleMenu())
  }
};

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

组成部分：

import React, { PropTypes, Component } from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import MenuListItem from './MenuListItem'

import LeftNav from 'material-ui/lib/left-nav';
import RaisedButton from 'material-ui/lib/raised-button';
import MenuItem from 'material-ui/lib/menus/menu-item';


const menuItems = [
  { text: 'Petr Klimenko', link: '' },
  { text: 'developer', link: '' },
  { text: 'Env diff', link: '/envdiff' },
  { text: 'Export to Env', link: '/envexport' }
]

export default class Menu extends Component {

tapMenu () {
   // const {toggleMenu} = this.props;
   console.log(this.props)
}
  render () {

    return (
      <div id="menu" ref="menu" className={this.props.activeClass}>

          <LeftNav open={ this.props.isOpenMenu}>
            <ul>
              <MenuItem> <Link to="/">RocketSibel</Link></MenuItem>
              {menuItems.map((item, i) => <MenuListItem {...item} key={i} />)}
              <RaisedButton label="Toggle Menu"  onTouchTap={this.tapMenu()} />
            </ul>
          </LeftNav >

      </div>
    )
  }
}

import React，{PropTypes，Component}来自“React”
从“反应路由器”导入{Link}
从“react redux”导入{connect}
从“/MenuListItem”导入菜单项
从“物料界面/库/左导航”导入左导航；
从“物料ui/lib/raised按钮”导入RaisedButton；
从“物料界面/库/菜单/菜单项”导入菜单项；
常量菜单项=[
{文本：'Petr Klimenko'，链接：'}，
{文本：'developer'，链接：'}，
{文本：'Env diff'，链接：'/Env diff'}，
{text:'导出到环境'，链接：'/envexport'}
]
导出默认类菜单扩展组件{
点击菜单（）{
//const{toggleMenu}=this.props；
console.log（this.props）
}
渲染（）{
返回(

火箭锡伯
{menuItems.map（（项，i）=>）}

)
}
}

---

在控制台中，我看到，当页面呈现时，toggleMenu方法被执行，tapMenu方法也被执行。我不知道它为什么会发生第一个问题是，您没有将函数传递给事件处理程序，而是调用它。只要改变一下：

onTouchTap={this.tapMenu()}

致：

第二个问题是，

connect

和

mapDispatchToProps

具有不同的功能。它应该是一个绑定动作创建者的函数，尝试更改：

function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory: dispatch(toggleMenu()) // this executes dispatch function
  }
};

致：

---

第一个问题是，您并没有将函数传递给事件处理程序，而是在调用它。只要改变一下：

onTouchTap={this.tapMenu()}

致：

第二个问题是，

connect

和

mapDispatchToProps

具有不同的功能。它应该是一个绑定动作创建者的函数，尝试更改：

function mapDispatchToProps(dispatch) {
  return {
    toggleMenuFactory: dispatch(toggleMenu()) // this executes dispatch function
  }
};

致：

---

好的，使用console.log dosnt执行方法。但是dispatch（toggleMenu（））仍然可以执行很多。但你们可能知道为什么tapMenu不通过点击按钮来调用吗@Madox2否，没有一个错误，但单击error不会显示console.log@madox2非常感谢，将方法onTap更改为onClick，一切正常）ok，使用console.log dosnt执行方法。但是dispatch（toggleMenu（））仍然可以执行很多。但你们可能知道为什么tapMenu不通过点击按钮来调用吗@madox2no，没有一个错误，但是单击error不会显示console.log@madox2非常感谢，将方法onTap更改为onClick，一切正常）