javascript - 为什么我不能在 .map() 函数的返回体中传递函数

Question

我正在尝试学习如何在反应中进行编码，并且正在学习教程。我遇到了一个问题（我以另一种方式解决了），但想知道它是如何工作的。

我的 render(){} 方法之前有以下功能：

onDeleteHandler = () => {
  axios.delete('my_firebase_link'+this.props.obj.id+'.json')
  .then(console.log('Deleted'))
  .catch(err => console.log(err))

}

在我的渲染方法中，我尝试动态创建一个表格行

render() {      
let tabRow = <p>Hello</p>;
if(this.state.businesses){
  tabRow = this.state.businesses.map(function(object, i){
    return <TableRow obj={object} key={i} onDelete={this.onDeleteHandler}/>;
  });
} return();

但是，当我尝试运行该代码时，出现以下错误：TypeError: Cannot read property 'onDeleteHandler' of undefined

在搜索了一些教程之后，我最终得到了以下完美运行的代码

render() {      
let tabRow = <p>Hello</p>;
if(this.state.businesses){
  tabRow = this.state.businesses.map(element =>(
    <TableRow obj={element} key={element.id} onDelete={(id) => this.onDeleteHandler(element.id)}/>
  ))
} return();

我想知道为什么最后一个解决方案有效，为什么当我在地图中使用“function()”方法时会引发错误。

抱歉，如果我的解释可能令人困惑，但如果我的解释缺少代码，我会给出任何代码。

太感谢了！

标签： javascriptarraysreactjsarray.prototype.map