React中函数构建的菜单组件状态更新后未重新渲染问题

1. 你将存储菜单项的menu定义为组件的实例属性，每次执行buildMenu方法时只会往数组中追加新元素，不会清空历史内容，哪怕状态更新，渲染时仍然会保留旧的菜单项，既会出现菜单项越来越多的问题，也无法正确应用新的selected状态。
2. 无需手动调用render()方法，React中setState执行后会自动触发组件重渲染，手动调用属于无效操作，不会解决渲染问题。
3. 整体实现不符合React声明式渲染逻辑：菜单项应该根据当前状态实时生成，而非预先存在实例属性中累积修改。

import * as React from 'react';
import {List, ListItemButton, ListItemText } from '@mui/material';
import { ListItem } from '@mui/material';

class Sidemenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 'home'
        }
    }

    changeActiveItem = (element) => {
        this.setState({ active: element });
    }

    buildMenu(active) {
        const menuItemKeys = ['home', 'stammdaten'];
        // 每次根据当前激活状态生成全新的菜单项数组
        return menuItemKeys.map(element => (
            <ListItem key={element}>
                <ListItemButton 
                    divider 
                    selected={element === active} 
                    onClick={() => this.changeActiveItem(element)}
                >
                    <ListItemText>{element}</ListItemText>
                </ListItemButton>
            </ListItem>
        ))
    }

    render() {
        const currentMenu = this.buildMenu(this.state.active);
        return (
            <List>
                {currentMenu}
                <div>{this.state.active}</div>
            </List>
        )
    }
}

export default Sidemenu;

内容的提问来源于stack exchange，提问作者Maik Thiele