从按钮调用时反应渲染没有改变答案

【问题标题】：React render not changing when calling from Button从按钮调用时反应渲染没有改变
【发布时间】：2020-11-04 13:05:03
【问题描述】：

当我单击以下反应代码中的登录或注册按钮时，renderView() 函数不会在页面上呈现登录（或注册）组件。当我在控制台中记录 e.currentTarget.value 的值时，单击按钮时会记录正确的值。我该如何解决？我希望点击登录或注册按钮时显示相应的组件

const AppHomePage = () => {
    const classes = useStyles();
    const [renderVal, setRenderVal] = useState(0);

    const renderView = () => {
        switch(renderVal){
            case 0:
                return <Page />
            case 1:
                return <Register />
            case 2:
                return <Login />
            default:
                return <Page />
        }
    }

    const ButtonChange = (e) => {
        setRenderVal(e.currentTarget.value);
    }

    return(
        <div>
            <AppBar className={classes.root} position='static' >
                <Toolbar className={classes.appbar}>
                    <Button className={classes.buttons} value={1} variant="contained" color="primary" onClick={ButtonChange}>
                        Register
                    </Button>
                    <Button className={classes.buttons} value={2} variant="contained" color="primary" onClick={ButtonChange}>
                        Login
                    </Button>
                </Toolbar>
            </AppBar>
            <div>
                { renderView() }
            </div>
            <CssBaseline />
        </div>
    )
}
const Login = () => {
    return(
        <div>
            <p>login</p>
        </div>
    )
}

const Register = () => {
    return(
        <div>
           register
        </div>
    )
}
const Page = () => {
    return(
        <div>
            page
        </div>
    )
}

【问题讨论】：

能否在 ButtonChange 中添加一个简单的 this.setState({});看看会发生什么？

标签： reactjs material-ui react-hooks

【解决方案1】：

在 onClick 函数中传递值。使用箭头函数并传递 1 或 2 之类的 id。onClick={() => ButtonChange(1)}

<Button className={classes.buttons} variant="contained" color="primary" onClick={() => ButtonChange(1)}>
                        Register
                    </Button>


<Button className={classes.buttons} variant="contained" color="primary" onClick={()=>ButtonChange(2)}>
                        Login
                    </Button>

现在在 ButtonChange 函数中获取上一步传递的值。

const ButtonChange = (id) => {
        setRenderVal(id);
    }

【讨论】：

【解决方案2】：

我通过简单地将案例从案例 1: 更改为案例 '1': 以此类推...

【讨论】：