реакция + сокращение: невозможно прочитать свойство «handleClickMenu» не определено

Question

Я новичок в реагенте и Redux. Я пытаюсь сделать меню, но консоль получает ошибку: «App.js? Eb5a: 12 Некопаемое TypeError: Не удается прочитать свойство« handleClickMenu »не определено»

Как исправить ошибку? Как полезная нагрузка в новой государственной записи?

App.js:

import React, { Component } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import User from '../components/User' 
import Page from '../components/Page' 
import BottomMenu from '../components/BottomMenu' 
import * as pageActions from '../actions/PageActions' 
import * as userActions from '../actions/UserActions' 
import * as bmenuActions from '../actions/BottomMenuActions' 

class App extends Component { 
    render() { 
    const { user, page, bottomMenu } = this.props 
    const { getPhotos } = this.props.pageActions 
    const { handleClickMenu } = this.props.bmenuActions 
    const { handleLogin } = this.props.userActions 

    return <div className='row'> 
     <Page photos={page.photos} year={page.year} getPhotos={getPhotos} fetching={page.fetching} error={page.error}/> 
     <User name={user.name} handleLogin={handleLogin} error={user.error} /> 
     <BottomMenu selectedItem={bottomMenu.selectedItem} bmenuClick={() => handleClickMenu} /> 
    </div> 
    } 
} 

function mapStateToProps(state) { 
    return { 
    user: state.user, 
    page: state.page, 
    bottomMenu: state.bottomMenu 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    pageActions: bindActionCreators(pageActions, dispatch), 
    userActions: bindActionCreators(userActions, dispatch), 
    bmenuActions: bindActionCreators(bmenuActions, dispatch) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App) 

компонент bottomMenu.js:

import React, { PropTypes, Component } from 'react' 
import BottomMenuItem from '../components/BottomMenuItem' 

export default class BottomMenu extends Component { 


    render() { 

     const { selectedItem, bmenuClick } = this.props; 

     const menuItems = [{ 
      url: 'home', 
      name: 'Главная страница' 
     }, { 
      url: 'goods', 
      name: 'Объем поставок' 
     }, { 
      url: 'geo', 
      name: 'География поставок' 
     }, { 
      url: 'clients', 
      name: 'Клиенты и партнеры' 
     }, { 
      url: 'production', 
      name: 'Виды продукции' 
     }, { 
      url: 'cost', 
      name: 'Рассчитайте стоимость' 
     }, { 
      url: '', 
      name: 'Свяжитесь с нами' 
     }]; 

     return <ul className='footer-menu'> 

      { menuItems.map((item,index) => <BottomMenuItem key={index} item={item} selected={index === selectedItem} bmenuClick={bmenuClick} />)} 

     </ul> 
    } 
} 


BottomMenu.propTypes = { 
    item: PropTypes.object, 
    selected: PropTypes.bool 
} 

компонент BottomMenuItem.js:

import React, { PropTypes, Component } from 'react' 

export default class BottomMenuItem extends Component { 

bmenu_Click(e){ 
    e.preventDefault() 
    this.props.bmenuClick(e) 
} 

    render() { 
    const { item, selected} = this.props 

    const className = 'footer-menu__li footer-menu__li--' + item.url + (selected ? ' footer-menu__li--current' : '') 

    return <li className={className}> 
     {!selected ? 
     <a href={item.url} className='footer-menu__href' onClick={::this.bmenu_Click}>{item.name}</a> 
     : 
     <span className='footer-menu__href'>{item.name}</span> 
     } 
     </li> 
    } 
} 

BottomMenuItem.propTypes = { 
    item: PropTypes.object.isRequired, 
    selected: PropTypes.bool.isRequired, 
    bmenuClick: PropTypes.func.isRequired 
} 

действие: BottomMenuAction.js

export function handleClickMenu(el) { 

console.log(el) 

    return function(dispatch) { 

    dispatch({ 
     type: 'bmenuClick', 
     payload:'' 
    }) 

    } 

} 

Answer 1

Несколько ошибок в коде

Первая опечатка, где вы bindAction, как bmenuActions, а затем в вашем App.js вы используете его с неправильным случае как const { handleClickMenu } = this.props.bMenuActions. Вам нужно изменить, что const { handleClickMenu } = this.props.bmenuActions

Кроме того, теперь, поскольку здесь handleClickMenu является функцией, Вы должны связать его, проходя вниз BottomMenu компонента как

<BottomMenu selectedItem={bmenu.selectedItem} bmenuClick={() => handleClickMenu} /> 

Теперь снова в App.js ваше состояние доступно, как bottomMenu и вы разрешаете его, как bmenu. Измените его на

const { user, page, bottomMenu } = this.props 

Теперь из BottomMenu компонента отправляет реквизит, как bmenuClick к BottomMenuItem компоненту как

return <ul className='footer-menu'> 

     { menuItems.map((item,index) => <BottomMenuItem key={index} item={item} selected={item === selectedItem} bmenuClick={() => bmenuClick }/>)} 

    </ul> 

но вы используете его в BottomMenuItem компоненты, как this.props.handleClickMenu здесь

bmenu_Click(e){ 
    this.props.handleClickMenu(e) 
} 

Вам необходимо изменить его как

bmenu_Click(e){ 
    this.props.bmenuClick(e) 
} 

Answer 2

Отлично, предупреждение исправлено. Теперь, я не понимаю, почему, когда вы нажимаете на ссылку не работает handleClickMenu в BottomMenuAstion.js

Answer 3

Спасибо, я сделал:

<BottomMenuItem key={index} item={item} pos={index} selected={index === selectedItem} bmenuClick={bmenuClick} /> 

и

<a href={item.url} className='footer-menu__href' onClick={::this.bmenu_Click} data-pos={pos}>{item.name}</a>