时间戳

首页 > 解决方案 > 来自 Redux 的 React 工作。TypeError：无法读取未定义的属性“类型”

javascript - 来自 Redux 的 React 工作。TypeError：无法读取未定义的属性“类型”

问题描述

遇到这样的问题，我按照模板做了，但是出了点问题。带有文件的项目可以在GitHub上找到

TypeError: Cannot read property 'type' of undefined
DataReducer
D:/React_learn/Gitwooder/Wooder/wooder/src/Redux/DataReducer.js:20
  17 | 
  18 | const DataReducer = (state = initialState , action) => {
  19 | 
> 20 |  switch(action.type){
  21 |      case 'HIDE-MENU' :
  22 |      console.log('doschlo')
  23 |      return{

标签： javascriptreactjsreduxreact-reduxundefined

解决方案

该错误表明您的操作中没有类型属性。

您应该发送这样的操作：dispatch({type: 'HIDE-MENU'})

如果它仍然不起作用，那么我希望您分享您的堆栈跟踪，以便我们能够看到从哪里分派了操作

编辑：

您的 mapDispatchToProps 不正确。mapDispatchToProps 中的每个属性都应该是一个使用 react-redux 传递的 dispatch 的函数。请记住，映射的结果最终会附加到组件中的 props 上。我建议你重新阅读文档：https ://react-redux.js.org/api/connect

这是正确的方法：

import React from 'react';
import classes from './Header.module.css';
import { connect } from 'react-redux';

//***** CHANGE 1 *****
import { HidemenuAC } from '../../Redux/DataReducer';


const Header = (props) =>{

    const Menu_view = () =>{
        props.Hidemenu(true)
    }

    return <header className={classes.Header}>
        <div className={classes.Header_menu} onClick={Menu_view}>
            <div>
                <div className={classes.line}></div>
                <div className={classes.line}></div>
                <div className={classes.line}></div>
            </div>
            <div className={classes.Header_menu_text} tabIndex="0">MENU</div>
        </div>
        <div className={classes.Big_line}></div>
        <ul className={classes.HeaderUl}>
            <li>HOME</li>
            <li>PRODUCTS</li>
            <li>ABOUT</li>
        </ul>
        <div className={classes.Header_circle} >i</div>
        <div className={classes.Header_arrow}>EN &#9660;</div>
    </header>
}

const mapStateToProps = (state) => {
    return{
       Menu:state.Data.Menu
    }    
}

//***** Change 2 ******
const mapDispatchToProps = (dispatch) => ({
    Hidemenu: (value) => dispatch(HidemenuAC(value))
})

//***** Change 3 ******
export default connect(mapStateToProps, mapDispatchToProps)(Header);

推荐阅读