React中如何聚合多个Child子组件state的value值求和并展示在Parent组件？

这个场景下最优的实现模式是状态提升：因为父组件需要聚合所有子组件的数据，所以把原本存在子组件内部的value状态，提升到父组件统一维护，子组件只负责拉取数据后通知父组件更新即可，完全符合React单向数据流的设计原则。

具体实现步骤： #

1. 父组件Parent新增state存储所有子组件的数值，同时提供一个更新子组件数值的回调方法，自动计算总和
2. 将回调方法通过props传递给每个Child组件
3. Child组件拉取到接口数据后，调用父组件传入的回调上报数值

修改后的Parent组件代码 #

export class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 用对象存储每个name对应的value，方便更新和求和
    this.state = {
      childValues: {
        nick: 0,
        lucile: 0,
        buster: 0
      }
    };
  }

  // 子组件上报数值的回调
  updateChildValue = (name, value) => {
    this.setState(prev => ({
      childValues: {
        ...prev.childValues,
        [name]: value
      }
    }));
  }

  // 计算总和
  getTotal = () => {
    return Object.values(this.state.childValues).reduce((sum, curr) => sum + curr, 0);
  }

  render() {
    return (
     <>
      <Child name='nick' onValueLoaded={this.updateChildValue} value={this.state.childValues.nick}/>
      <Child name='lucile' onValueLoaded={this.updateChildValue} value={this.state.childValues.lucile}/>
      <Child name='buster' onValueLoaded={this.updateChildValue} value={this.state.childValues.buster}/>
      <span>总和：{this.getTotal()}</span>
     </>
    )
  }
}

修改后的Child组件代码 #

export class Child extends React.Component {
  async componentDidMount(){
    let response = await axios.get(`https://getvaluefromapi/${this.props.name}`)
    // 直接上报给父组件，无需维护内部state
    this.props.onValueLoaded(this.props.name, response.data.value);
  }

  render() {
    return (<span>{this.props.value}</span>)
  }
}

优化说明：上述实现直接移除了Child内部的value state，所有数据统一由父组件分发，保证数据源唯一，不会出现父子组件数据不一致的问题。如果子组件嵌套层级很深，逐层传递回调比较繁琐，也可以替换为Context API实现跨层级数据同步，当前浅嵌套场景下状态提升是最轻量的方案。

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