首次加载时如何在React父组件中获取子组件状态值的总和？

嘿，我来帮你分析下问题出在哪，以及怎么解决～

你现在遇到的总和不对的问题，主要有两个核心原因：

1. setState的异步特性 & 状态更新覆盖 #

首先，setState是异步操作——你在调用this.setState后立刻打印this.state.total，此时React还没完成状态更新，所以打印的还是旧值。但这不是总和没变成3的关键原因。

真正的问题是：两个Child组件的componentDidMount会在React的同一渲染批次里触发，它们调用父组件的calculateTotal时，都是基于父组件初始的total: 0来计算的。第一个调用算出来0+1=1，第二个调用算出来0+2=2，最后两次setState的结果会被合并，最终total变成2，而不是3——因为两次更新都依赖了同一个旧状态，后一次覆盖了前一次的更新。

2. 修复方案：使用函数式更新state #

React的setState支持传入一个函数，这个函数会接收最新的当前状态作为参数，返回新的状态值。这样就能保证每次更新都是基于最新的状态计算，不会出现覆盖问题。

修改父组件的calculateTotal方法即可：

calculateTotal = value => {
  this.setState(prevState => {
    const newTotal = prevState.total + value;
    console.log("newTotal ", newTotal);
    return { total: newTotal };
  }, () => {
    // 如果需要在状态更新完成后执行操作，可以用这个回调函数
    console.log("total after setting state", this.state.total);
  });
};

额外补充 #

• 函数式更新是处理「依赖当前状态的更新」场景的最佳实践，尤其是在多个异步更新可能同时触发的情况下。
• 如果你只是想在组件加载时显示固定的总和（1+2=3），其实也可以直接在父组件的constructor里初始化total: 3，但这种方式只适用于子组件value固定的情况。如果子组件的value是动态获取的（比如从接口请求），那还是上面的函数式更新方案更通用。

完整可运行代码示例 #

import React, { Component } from 'react';

class Child extends Component {
  state = { value: this.props.initialValue };

  componentDidMount() {
    this.props.calculateTotal(this.state.value);
  }

  render() {
    return <div>Child Value: {this.state.value}</div>;
  }
}

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = { total: 0 };
  }

  calculateTotal = value => {
    this.setState(prevState => {
      const newTotal = prevState.total + value;
      console.log("newTotal ", newTotal);
      return { total: newTotal };
    }, () => {
      console.log("total after setState callback", this.state.total);
    });
  };

  render() {
    return (
      <div>
        <h2>Total: {this.state.total}</h2>
        <Child initialValue={1} calculateTotal={this.calculateTotal} />
        <Child initialValue={2} calculateTotal={this.calculateTotal} />
      </div>
    );
  }
}

export default Parent;

这样修改后，父组件的total会正确更新为3，因为每次setState都是基于前一次更新后的状态计算：第一次更新后total变成1，第二次更新基于1计算1+2=3，最终状态就是你期望的结果啦～

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