React子组件传值至父组件报错：无法获取callbackRowSum属性求助

这个错误的核心原因是**map回调函数里的this上下文不是你的React组件实例**。当你使用普通的function作为map的回调时，它会创建自己的this上下文，导致你无法访问组件的this.callbackRowSum方法。

下面是几种可行的解决方案：

方案1：使用箭头函数作为map的回调 #

箭头函数不会绑定自己的this，它会继承外部作用域的this（也就是你的组件实例），这样就能正常访问this.callbackRowSum了：

ViewGRNCartTableRow(){
  return this.state.cartProducts.map((object,i) => {
    return <ViewGRNTable obj={object} key={i} callbackSum={this.callbackRowSum} />;
  });
}

方案2：给map的回调函数绑定this #

你可以通过bind(this)手动把组件的this绑定到回调函数上：

ViewGRNCartTableRow(){
  return this.state.cartProducts.map(function(object,i){
    return <ViewGRNTable obj={object} key={i} callbackSum={this.callbackRowSum} />;
  }.bind(this));
}

方案3：在构造函数中绑定ViewGRNCartTableRow的this #

如果你习惯使用普通函数，也可以在组件的构造函数里提前绑定当前方法的this：

constructor(props) {
  super(props);
  this.state = {
    cartProducts: [],
    GRNtotal: 0
  };
  // 绑定方法的this
  this.ViewGRNCartTableRow = this.ViewGRNCartTableRow.bind(this);
}

ViewGRNCartTableRow(){
  return this.state.cartProducts.map(function(object,i){
    return <ViewGRNTable obj={object} key={i} callbackSum={this.callbackRowSum} />;
  });
}

额外优化：使用函数式setState #

另外还要注意，当你的新状态依赖于之前的状态时，最好使用函数式的setState，因为React的setState是异步操作，直接访问this.state可能会拿到过时的值：

callbackRowSum = (rowsum) => {
  this.setState(prevState => ({
    GRNtotal: prevState.GRNtotal + rowsum
  }))
}

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