React单选按钮点击时无法更新计数状态问题求助

架构老林

2026-5-15

问题分析与解决方案

嘿，你猜得没错！问题确实出在App组件的onSelect函数里——你用了prevState.collaborator++这种原地修改状态的操作，这直接违反了React状态的不可变性原则，导致React检测不到状态变化，所以开发者工具里的状态才没更新。

为什么会这样？

++运算符是原地递增，它会直接修改prevState对象里的属性值。而React判断状态是否变化的依据是「新状态对象是否和旧状态对象引用不同」，原地修改不会创建新的引用，React就会认为状态没有改变，自然不会触发更新。

修复方法

把prevState.xxx++改成prevState.xxx + 1，这样会返回一个新的数值，而不是修改原状态对象。另外，我们还可以简化冗余的switch语句，用计算属性名来让代码更简洁：

修正后的`onSelect`函数

onSelect(e) {
  const archetype = e.target.value;
  this.setState(prevState => ({
    [archetype]: prevState[archetype] + 1
  }));
}

完整修正后的App组件代码

import React, { Component } from 'react';
import './App.css';
import Form from './components/Form';
class App extends Component {
  constructor (props) {
    super (props);
    this.state = {
      collaborator: 0,
      pilot: 0,
      producer: 0,
      harmonizer: 0,
      answers: [
        {answer: 'Team building', archetype: 'collaborator'},
        {answer: 'Directing strategy', archetype: 'pilot'},
        {answer: 'Driving task completion', archetype: 'producer'},
        {answer: 'Ensuring long term stability and quality of work', archetype: 'harmonizer'}
      ]
    }
    this.onSelect = this.onSelect.bind(this);
  }

  onSelect(e) {
    const archetype = e.target.value;
    this.setState(prevState => ({
      [archetype]: prevState[archetype] + 1
    }));
  }

  render() {
    return (
      <div>
        <Form answers={this.state.answers} onSelect={this.onSelect}/>
      </div>
    );
  }
}
export default App;