为什么不是'；t我的反应组件'；css的动态更新？

我添加了redux来创建react应用程序，我一直在尝试让导航器工作。我通过突出显示活动的“页面链接”来实现这一点。我为此使用的代码是react钩子（使用state来记住当前页面）和npm包类名的组合

类名（对象['key']&&classes.activeItem）

因此，在这里，我让object['key']在激活特定项时计算为true，以便该项获得activeItem类

当我将object['key']替换为true时，它会工作。当我单击console.log对象['key']后，它的计算结果也为true

为什么这不起作用？谢谢

import React, { useEffect, memo } from 'react';
import { bindActionCreators, compose } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import { loadPage } from './actions';
import { uploadFile } from '../uploadFile/actions';
import _ from 'lodash';


const styles = theme => ({
  item: {
    paddingTop: 4,
    paddingBottom: 4,
    color: 'rgba(255, 255, 255, 0.7)',
    '&:hover': {
      backgroundColor: 'rgba(255, 255, 255, 0.08)',
    },
  },
  itemPrimary: {
    color: 'inherit',
    fontSize: theme.typography.fontSize,
    '&$textDense': {
      fontSize: theme.typography.fontSize,
    },
  },
  itemActiveItem: {
    color: '#4fc3f7',
  },
  textDense: {}
});

function Navigator(props) {
  const { classes, curPage, onUploadFile, onPageChange, dispatch, ...other } = props;

  let activePage = {
    'invite': false,
  }

  useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
    activePage = _.mapValues(activePage, () => false);
    activePage[curPage] = true
  });


  return (
    <Drawer variant="permanent" {...other}>
      <List disablePadding>
        <ListItem button className={classNames(classes.logo)}>
          <img src={require("assets/img/logo.png")} alt={''}/>
        </ListItem>

        <ListItem className={classes.categoryHeader} >
          <ListItemText classes={{ primary: classes.categoryHeaderPrimary }}>
            Files
          </ListItemText>
        </ListItem>

        <ListItem
          button
          dense
          className={classNames(classes.item, activePage['invite'] && classes.itemActiveItem)}
          onClick={() => {onPageChange('invite')}}
          >
          <ListItemIcon><PeopleIcon /></ListItemIcon>
          <ListItemText classes={{ primary: classes.itemPrimary, textDense: classes.textDense }}>
            Invite To Your Team
          </ListItemText>
        </ListItem>

      </List>

    </Drawer>
  );
}

Navigator.propTypes = {
  classes: PropTypes.object.isRequired,
  onPageChange: PropTypes.func.isRequired,
  onUploadFile: PropTypes.func.isRequired
};

const mapStateToProps = (state) => {
  const { curPage } = state.app;
  return { curPage };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onPageChange: bindActionCreators(loadPage, dispatch),
    onUploadFile: bindActionCreators(uploadFile, dispatch),
    dispatch
  };
};

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps
);


export default compose(withConnect, memo, withStyles(styles))(Navigator);

import React，{useffect，memo}来自“React”；
从“redux”导入{bindActionCreators，compose}；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“@material ui/core/styles”导入{withStyles}”；
从“./actions”导入{loadPage}；
从“../uploadFile/actions”导入{uploadFile}；
从“lodash”进口；
常量样式=主题=>({
项目：{
paddingTop:4，
填充底部：4，
颜色：“rgba（255，255，255，0.7）”，
“&：悬停”：{
背景颜色：“rgba（255，255，255，0.08）”，
},
},
项目主要：{
颜色：“继承”，
fontSize:theme.typography.fontSize，
“&$textDense”：{
fontSize:theme.typography.fontSize，
},
},
itemActiveItem：{
颜色：“#4fc3f7”，
},
textDense:{}
});
功能导航器（道具）{
const{classes，curPage，onUploadFile，onPageChange，dispatch，…other}=props；
让activePage={
“邀请”：假，
}
useffect（（）=>{
如果（！curPage）{
onPageChange（“搜索”）；
}
activePage=\映射值（activePage，（）=>false）；
activePage[curPage]=真
});
返回(
文件夹
{onPageChange（'invite'）}
>
邀请你加入你的团队
);
}
Navigator.propTypes={
类：PropTypes.object.isRequired，
onPageChange:PropTypes.func.isRequired，
onUploadFile:PropTypes.func.isRequired
};
常量mapStateToProps=（状态）=>{
const{curPage}=state.app；
返回{curPage}；
};
const mapDispatchToProps=（调度）=>{
返回{
onPageChange:bindActionCreators（加载页、调度），
onUploadFile:bindActionCreators（上传文件、分派），
派遣
};
};
const withConnect=connect(
MapStateTops，
mapDispatchToProps
);
导出默认组合（withConnect、memo、withStyles（styles））（导航器）；

请注意，传递给

useffect

钩子的函数总是在渲染后运行

您的

useffect

不会导致组件重新渲染以查看更改。仅对状态的更改会导致重新渲染。如果要重新渲染，首先需要使用

useState

hook，然后需要从

useffect

hook中使用

setState

。或者，您可以将这两行作为渲染的一部分运行（将它们从

useffect

hook中删除，将它们放在外部）：

但是当我查看代码时，我认为您可以使用

curPage=='invite'&&classes.itemActiveItem

而不是

activePage['invite']&&classes.itemActiveItem

并删除与

activePage

对象相关的那些不必要的行。这将使事情变得容易得多

activePage = _.mapValues(activePage, () => false);
activePage[curPage] = true
useEffect(() => {
    if(!curPage){
      onPageChange('search');
    }
});