React useState正常但类组件render写法不生效问题求助

你的类组件写法存在3个核心语法错误，是导致交互无响应的直接原因：

• 类组件状态更新方式错误：类组件中禁止直接给this.state赋值修改状态，这种写法React无法感知状态变化，不会触发重渲染。必须调用内置的this.setState()方法更新状态，才会触发render重新执行、更新界面。你代码里写的onClick={(e) => this.state={newColor: e.target.id}}属于非法的状态更新操作。
• 状态取值路径错误：类组件的所有状态都存储在this.state对象下，你在生命周期和方法中写的this.newColor是读取组件实例的直接属性，永远为undefined，所有颜色判断逻辑都不会生效，正确取值方式是this.state.newColor。
• 生命周期使用错误：componentDidUpdate只会在组件完成更新重渲染后触发，组件首次挂载时不会执行，导致初始状态下默认选中的绿色块不会显示橙色边框，需要补充componentDidMount生命周期处理初始状态的样式设置。

修正后的可运行类组件代码如下：

class Test1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newColor: 'green'
        }
        // 绑定方法this指向，避免回调中this丢失
        this.changeBg = this.changeBg.bind(this);
        this.setBorder = this.setBorder.bind(this);
    }

    // 组件首次挂载完成后设置初始选中边框
    componentDidMount() {
        this.setBorder();
    }

    // 组件更新完成后同步选中边框样式
    componentDidUpdate() {
        this.setBorder();
    }

    setBorder() {
        const { newColor } = this.state;
        // 先重置所有边框为默认黑色
        document.getElementById('green').style.borderColor = "black";
        document.getElementById('yellow').style.borderColor = "black";
        document.getElementById('red').style.borderColor = "black";
        // 给当前选中项设置高亮边框
        if (newColor === 'green') document.getElementById('green').style.borderColor = "orange";
        if (newColor === 'yellow') document.getElementById('yellow').style.borderColor = "orange";
        if (newColor === 'red') document.getElementById('red').style.borderColor = "orange";
    }

    changeBg() {
        document.body.style.backgroundColor = this.state.newColor;
    }

    render() {
        return (
            <div>
                <div style={{width: '240px', height: '88px', border: '3px solid black', borderRadius: '10px'}}>
                    <div 
                        id="green" 
                        onClick={(e) => this.setState({newColor: e.target.id})}    
                        style={{width: '40px', height: '40px', background: 'green', border: '3px solid black', float: 'left', margin: '20px 0 0 30px', borderRadius: '10px', cursor: 'pointer'}}
                    ></div>
                    <div 
                        id="yellow" 
                        onClick={(e) => this.setState({newColor: e.target.id})}   
                        style={{width: '40px', height: '40px', background: 'yellow', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', borderRadius: '10px', cursor: 'pointer'}}
                    ></div>
                    <div 
                        id="red" 
                        onClick={(e) => this.setState({newColor: e.target.id})}      
                        style={{width: '40px', height: '40px', background: 'red', border: '3px solid black', float: 'left', margin: '20px 0 0 20px', borderRadius: '10px', cursor: 'pointer'}}
                    ></div>
                </div>
                <button onClick={this.changeBg}>SAVE</button>
            </div>
        );
    }
}

补充说明：你当前手动操作DOM修改样式的写法并不符合React的设计理念，更优的实现方式是直接根据state动态绑定元素style，状态变化时React会自动更新DOM，完全不需要手动调用document.getElementById修改样式，代码可维护性更高。

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