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

很好，警告已经纠正。现在，我不明白为什么当你点击链接时无法在BottomMenuAstion.js中使用handleClickMenu

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>

react + redux：无法读取未定义的属性'handleClickMenu'

3 个答案: