React中如何更新state？Hamburger组件点击切换状态不生效问题求助

翻译后的提问内容 #

我尝试了很长时间都没能实现目标功能，目前查到的所有方法都没有生效。我已经参考过W3 Schools的教程以及相关的Stack Overflow问题，其余查到的资料也都遵循相同的写法，但我实在找不到代码的问题所在。如果有人能定位到问题，对我的帮助会非常大：

import React from 'react';

export class Hamburger extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            click: false
        };
    }

    handleClick = () => {
        if (this.state.click) {
            this.setState({click: false});
        } else {
            this.setState({click: true});
        };
    }
    render() {
        let className = 'hamburger';
        if (this.state.click) {
            className += ' cross';
        }

        return (
            <div
                className={className}
                onclick={this.handleClick}
            >
                <svg
                    viewbox='0 0 100 100'
                    preserveAspectRatio='xMidYMid meet'
                >
                    <line x1='10' x2='90' y1='20' y2='20' id='top'/>
                    <line x1='10' x2='90' y1='50' y2='50' id='mid'/>
                    <line x1='10' x2='90' y1='80' y2='80' id='btm'/>
                </svg>
            </div>
        );
    }
}

提前感谢各位的帮助

问题解答 #

你的代码存在两处命名规范错误，不符合React和SVG的语法要求：

• 事件名拼写错误：React的内置事件属性统一使用驼峰命名，你代码中div上绑定的onclick要改为onClick。小写的onclick是原生HTML的属性写法，React不会识别为事件绑定，这就是点击后状态没有更新、类名没有切换的核心原因。
• SVG属性拼写错误：SVG的视口属性标准写法是viewBox，第二个字母B需要大写，你写的全小写viewbox会导致视口设置失效，可能出现图标显示变形的问题。

另外你的状态切换逻辑可以简化，不需要额外写if判断，直接基于之前的状态取反即可，写法更简洁，也能避免直接读取this.state可能出现的状态异步更新问题。

修正后的完整代码：

import React from 'react';

export class Hamburger extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            click: false
        };
    }

    handleClick = () => {
        this.setState(prevState => ({
            click: !prevState.click
        }))
    }
    render() {
        const className = this.state.click ? 'hamburger cross' : 'hamburger';

        return (
            <div
                className={className}
                onClick={this.handleClick}
            >
                <svg
                    viewBox='0 0 100 100'
                    preserveAspectRatio='xMidYMid meet'
                >
                    <line x1='10' x2='90' y1='20' y2='20' id='top'/>
                    <line x1='10' x2='90' y1='50' y2='50' id='mid'/>
                    <line x1='10' x2='90' y1='80' y2='80' id='btm'/>
                </svg>
            </div>
        );
    }
}

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