React 传递箭头函数作为组件的道具。无法读取未定义的属性“purchaseAd”答案

【问题标题】：React passing arrow function as props to component. Cannot read property 'purchaseAd' of undefinedReact 传递箭头函数作为组件的道具。无法读取未定义的属性“purchaseAd”
【发布时间】：2018-11-09 17:54:54
【问题描述】：

我正在尝试将函数 purchaseAs 作为道具传递给组件，但出现 TypeError: Cannot read property 'purchaseAd' of undefined。我究竟做错了什么？抱歉，我知道这是一个常见问题，但我是 React 新手。

class Seller extends React.Component {
    constructor(props) {
        super(props);
        var data = require('./sellerData.json');
        this.state = {
            sellerData: data
        };
     }


purchaseAd = () =>
{
    console.log("called")

}

render () {
    return (
      <Layout>
      {
        this.state.sellerData.map(function(advertiser) 
        {
        return (
            <Entry
            purchaseAd = {this.purchaseAd}
            key = {advertiser.id}
            advertiser = {advertiser}
            /> 
            )
          }
      )}
      </Layout>
    )
  }
}

【问题讨论】：

标签： reactjs

【解决方案1】：

这一行：this.state.sellerData.map(function(advertiser)

当您在此处使用非箭头函数时，this 的值会在调用该函数时发生变化。将其转换为像这样的箭头函数：this.state.sellerData.map((advertiser) =>，你应该准备好了

【讨论】：

@ChrisJohnston 我强烈建议阅读this 的前两章，这对我了解this 的工作原理非常有用
老实说，该系列丛书中的其他所有内容都很棒

【解决方案2】：

您需要使用箭头函数在地图函数中传递 this 的范围。

this.state.sellerData.map((advertiser) => {
your code...
}

【讨论】：

非常感谢，其他答案比你早1分钟，所以我接受了他的。道歉