TypeError: Cannot read properties of undefined (reading 'hovered')

来源:7-7 使用 combineReducers 完成对数据的拆分管理

阿ccciii

2021-11-04

图片描述
reducer.js

import { combineReducers } from "redux";
import * as headerReducer from "../common/header/store";

export default combineReducers({
    headerReducer
});

headerReducer

const defaltState = {
    hovered: false
};

export default function headerReducer(state = defaltState, action) {
    if(action.type === 'navitem_hover'){
        console.log('123');
        return {
            hovered: true
        }
    }
    return state;
}

index.js

import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import styles from './style.css' 
import * as actionCreators from './store/actionCreators';

import NavItemList from './NavItemList';

const getNavItemList = (show) => {
    if(show){
        return <NavItemList></NavItemList>;
    }else{
        return null;
    }
}

const Header = props => {

    return (
        <Fragment>
            <div className={styles.headerWrapper}>
                <a className={styles.logo}/>
                <div className={styles.Nav}>
                    <div className={styles.NavItem}><a>首页</a></div>
                    <div onMouseEnter={props.handleHovered}
                         className={styles.NavItem}><a>方案解决</a></div>
                    <div className={styles.NavItem}><a>服务支持</a></div>
                    <div className={styles.NavItem}><a>加入我们</a></div>
                    <div className={styles.NavItem}><a>关于我们</a></div>
                </div>
            </div>
            {getNavItemList(props.hovered)}
        </Fragment>
        
    )

}

const mapStateToProps = state => {
    return{
        hovered: state.headerReducer.hovered
    }
}

const mapDispatchToProps = dispatch => {
    return{
        handleHovered(){
            dispatch(actionCreators.NavItemHover());
        }
    }
}

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

老师这个地方是哪里有问题呀?

写回答

1回答

Dell

2021-11-04

state.headerReducer 应该不存在,你看看是不是state 里面的数据拿的不对

0
0

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程