React类组件点击按钮状态变更但组件未显隐问题求助

你的核心问题是类组件中直接修改this.state而非使用setState方法——React类组件必须通过this.setState()来更新状态，直接赋值修改this.state不会触发组件重新渲染，所以状态变了但组件显隐没切换。

错误代码部分 #

changeState(name) {
    console.log(name)
    switch(name) {
        case 'toogleShowAllUsers':
            this.state = ({ toogleShowAllUsers: !this.state.toogleShowAllUsers })
        break;
        case 'toogleShowAllTasks':
            this.state = ({ toogleShowAllTasks: !this.state.toogleShowAllTasks })
            break;
        default:
    }
}

修正后的核心逻辑 #

把直接赋值改成this.setState()，同时简化状态切换逻辑：

changeState(name) {
    console.log(name)
    this.setState(prevState => ({
        [name]: !prevState[name]
    }))
}

通过动态属性名直接处理两种状态切换，不用写冗余的switch分支，更简洁高效。

另外，你导入了useState但类组件用不到，建议删掉这部分冗余导入：

// 移除useState导入，类组件不需要它
import React, { Component } from "react";

完整修正后的Admin组件代码 #

import React, { Component } from "react";

import { Box, Typography, Stack, Button, Divider } from '@mui/material';

import ListUsers from '../components/ListUsers'
import ListTasks from "../components/ListTasks";


class Admin extends Component {

    constructor() {
        super();
        this.state = {
            /*Start with all components hidden*/
            toogleShowAllUsers: false,
            toogleShowAllTasks: false
        };
        this.changeState = this.changeState.bind(this)
    }

    changeState(name) {
        console.log(name)
        this.setState(prevState => ({
            [name]: !prevState[name]
        }))
    }

    render() {
        const { toogleShowAllUsers, toogleShowAllTasks } = this.state
        return (
            <Box>
                <Typography 
                    variant="h4" 
                    fontWeight="bold" 
                    sx={{ fontSize: { lg: '44px', xs: '30px' } }} 
                    mb="46px">Admin Panel
                </Typography>
                <Stack
                    direction="row"
                    divider={<Divider 
                                orientation="vertical" 
                                flexItem
                                sx={{bgcolor: "secondary.light"}}/>}
                    spacing={2}>
                        <Button>Crear usuario</Button>
                        <Button>Eliminar usuario</Button>
                        <Button onClick={() => this.changeState('toogleShowAllUsers')}>Listar Usuarios</Button>
                </Stack>
                <Stack
                    direction="row"
                    divider={<Divider 
                                orientation="vertical" 
                                flexItem
                                sx={{bgcolor: "secondary.light"}}/>}
                    spacing={2}>
                        <Button>Crear tarea</Button>
                        <Button>Eliminar tarea</Button>
                        <Button>Asignar tarea</Button>
                        <Button onClick={() => this.changeState('toogleShowAllTasks')}>Listar Tareas</Button>
                </Stack>
    
                {/*Render options here*/}
                {toogleShowAllUsers ? <ListUsers /> : null}
                {toogleShowAllTasks ? <ListTasks /> : null}
            </Box>
            )
        }
    }   
    
export default Admin;

补充说明 #

React类组件的状态更新是异步的，setState接收的函数参数（prevState）能确保你基于最新的状态进行修改，避免因异步更新导致的状态错误。

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