React中map循环计算总值后，如何将结果赋值给state(totPrice)？

嘿，我来帮你搞定这个累加赋值的问题～

首先咱得说，用map()来做累加其实有点“大材小用”甚至不符合它的设计初衷。map()的本职工作是遍历数组并返回一个新的转换后的数组，你之前在它的回调里修改外部变量tot，虽然能得到结果，但属于“副作用”操作，代码不够语义化，也容易让人困惑。

更合适的做法是用reduce()，它就是专门用来把数组归约成单个值的工具，比如累加、求乘积这类操作，用它既清晰又规范。

给你修正后的组件代码，顺便加了一些边界处理（比如防止props.items为空的情况）：

class Items extends Component {
  constructor(props){
    super(props);
    // 先处理props.items，避免空数组/undefined导致报错
    const items = props.items || [];
    // 用reduce计算总价，初始值设为0，空数组也能返回0
    const tot = items.reduce((accumulator, item) => accumulator + item.Cost, 0);
    this.state = {
      totPrice: tot,
      check: true
    }
  }

  handlePriceChange(cost){
    // 举个例子，如果要动态修改总价，可以这样写
    this.setState(prevState => ({
      totPrice: prevState.totPrice + cost
    }));
  }

  // 其他组件方法...
}

另外还要提醒你一个点：如果props.items是异步获取的（比如从接口请求来的），那constructor只会在组件初始化时执行一次，后续props.items更新的时候，totPrice不会自动跟着变。这时候你需要监听props的变化来更新状态，比如用componentDidUpdate或者getDerivedStateFromProps：

方案1：用componentDidUpdate #

componentDidUpdate(prevProps) {
  // 只有当items变化时才重新计算总价
  if (prevProps.items !== this.props.items) {
    const tot = (this.props.items || []).reduce((acc, item) => acc + item.Cost, 0);
    this.setState({ totPrice: tot });
  }
}

方案2：用getDerivedStateFromProps（更推荐的静态方法） #

static getDerivedStateFromProps(nextProps, prevState) {
  // 对比新旧props的items，变化了就重新计算
  if (nextProps.items !== prevState.prevItems) {
    const tot = (nextProps.items || []).reduce((acc, item) => acc + item.Cost, 0);
    return {
      totPrice: tot,
      prevItems: nextProps.items // 存当前items用于下次对比
    };
  }
  return null; // 没有变化就返回null，不更新状态
}

constructor(props){
  super(props);
  const items = props.items || [];
  const tot = items.reduce((acc, item) => acc + item.Cost, 0);
  this.state = {
    totPrice: tot,
    check: true,
    prevItems: items // 初始化prevItems
  }
}

这样不管是初始化还是后续props更新，totPrice都能准确对应数组的总价啦～

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