ReactJS回调错误：子组件向父组件传递计数器值失败求助

兄弟，我看了你这段DuelTurn组件的代码，问题主要出在这几个地方哈：

• 你用了componentWillMount这个已经被React废弃的生命周期钩子，现在官方早就不推荐用它了，换成componentDidMount处理初始化逻辑更稳妥
• this.setState({compteur: this.state.compteur++})的自增写法有坑：后置++是先返回当前值再自增，所以你实际设置的compteur还是原来的0，根本没完成自增操作
• 你只在组件挂载前触发了一次回调，但后续如果计数器有变化，父组件根本收不到更新信号

接下来给你修正后的代码，分场景处理：

场景1：子组件完整代码（支持初始化+动态更新传递） #

class DuelTurn extends React.Component {
  constructor(props) {
    super(props);
    // 规范的state初始化方式，直接写在constructor里
    this.state = { compteur: 0 };
  }

  componentDidMount() {
    // 组件挂载完成后，把初始计数器值传给父组件
    this.props.onCounterChange(this.state.compteur);
  }

  handleClick(step) {
    if (step === true) {
      console.log('gagné');
      // 用函数式setState确保拿到最新的状态值，避免异步更新问题
      this.setState(prevState => ({
        compteur: prevState.compteur + 1
      }), () => {
        // setState的回调里，确保状态更新完成后再通知父组件
        this.props.onCounterChange(this.state.compteur);
      });
    } else {
      console.log('perdu');
      // 失败场景的计数器更新逻辑同理
      this.setState(prevState => ({
        compteur: prevState.compteur - 1
      }), () => {
        this.props.onCounterChange(this.state.compteur);
      });
    }
  }

  render() {
    return (
      <div>
        {/* 示例按钮，触发点击逻辑 */}
        <button onClick={() => this.handleClick(true)}>获胜</button>
        <button onClick={() => this.handleClick(false)}>失败</button>
        <p>当前计数器：{this.state.compteur}</p>
      </div>
    );
  }
}

场景2：父组件如何接收值 #

父组件里使用DuelTurn时，需要传递一个回调函数来接收子组件的计数器：

class ParentComponent extends React.Component {
  state = { childCounter: 0 };

  // 定义接收子组件值的回调函数
  handleCounterUpdate = (counterValue) => {
    console.log('从子组件收到的计数器：', counterValue);
    // 把值存在父组件的state里，方便后续使用
    this.setState({ childCounter: counterValue });
  }

  render() {
    return (
      <div>
        <DuelTurn onCounterChange={this.handleCounterUpdate} />
        <p>子组件传来的计数器：{this.state.childCounter}</p>
      </div>
    );
  }
}

关键注意点 #

• 永远用函数式setState（prevState => ({...})）更新依赖于之前状态的值，避免React状态异步更新导致的错误
• 后续要传递分数的话，逻辑完全一致：在子组件里更新分数状态后，通过回调函数传给父组件即可
• 尽量避免使用已废弃的生命周期钩子，换成React官方推荐的API，减少后续版本兼容问题

内容的提问来源于stack exchange，提问作者Kérian Pelat