React子组件调用父组件传递函数时出现TypeError问题求助

你遇到的问题根源在于**map回调函数里的this指向错误**，导致传递给Fly组件的addHours并不是你定义的组件方法，而是undefined。

具体原因 #

在你的Application组件的render方法中，map使用了普通的函数作为回调：

{this.state.flies.map(function(fly){
  return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
})}

普通函数会创建自己的this上下文，这里的this并不指向Application组件实例，所以this.addHours是undefined，当子组件Fly调用this.props.addHours()时，自然会抛出TypeError。

解决方法（任选其一即可） #

1. 使用箭头函数作为map的回调

箭头函数不会绑定自己的this，它会继承外层上下文的this，也就是Application组件实例：

{this.state.flies.map((fly) => {
  return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
})}

2. 给map传递第二个参数指定this

Array.prototype.map支持第二个参数，用来指定回调函数执行时的this指向：

{this.state.flies.map(function(fly){
  return <li><Fly addHours={this.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
}, this)} // 这里的this就是Application组件实例

3. 提前保存this的引用

在map之前把组件的this存到一个变量里，比如that，然后在回调里使用that：

const that = this;
{this.state.flies.map(function(fly){
  return <li><Fly addHours={that.addHours} name={fly.name} hours={fly.hours} fish={fly.fish} /></li>;
})}

额外的小建议 #

另外，你的handleSubmit方法里修改状态的方式有问题：

let tempState = this.state.flies
tempState.push(myFly)
this.setState(tempState)

你直接修改了原状态数组（tempState是原数组的引用），然后把原数组传给setState，这不符合React的状态不可变原则，可能导致组件不重新渲染。正确的做法是创建一个新数组：

let tempState = [...this.state.flies]; // 展开原数组创建新数组
tempState.push(myFly);
this.setState({ flies: tempState }); // 传入新的状态对象

这样修改后，你的addHours方法就能正常被子组件调用了。

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