Javascript 如果我在“map”中的“onClick”中引用一个方法，为什么我的组件会断开？

最愚蠢的事情发生在我的代码上。我有一个在DOM中呈现的项目列表，我需要放置一个按钮来调用另一个函数，如果我像这样放置按钮，一切都正常，但是如果我为该按钮分配了一个函数，那么一切都会发生

我将向您显示我的代码，看

@connectToStores
export default class Dealers extends Component {

  static contextTypes = {
    router : React.PropTypes.func,
  }

  static propTypes = {
    title : React.PropTypes.func,
  }

  constructor (props) {
    super(props);
    this.state = {
      modal : false,
    }
  }

  static getStores () {
    return [ GetDealersStore ];
  }

  static getPropsFromStores () {
    return GetDealersStore.getState();
  }
  render () {
    let dealersInfo;
    if (this.props.dealerData !== null) {
      dealersInfo = this.props.dealerData.dealersData.map(function(dealer) {
        return (<div key={dealer.DealerId} style={Styles.dealerCard}>
              <Card>
                <CardHeader title={dealer.NickName}
                            subtitle={dealer.DealerId}
                            avatar={dealer.Picture}/>
                <CardText>
                  <FloatingActionButton> ////////////////////////
                    <IconAdd />    //////THIS IS THE BUTTON/////
                  </FloatingActionButton>//////////////////////
                </CardText>
              </Card>
            </div>
        );
      });
    } else {
      dealersInfo = <p>Loading . . .</p>;
    }

    return (
      <Grid>
        <Row>
          <Column><h4>Dealers</h4></Column>
        </Row>
        <div style={Styles.mainCont}>
          {dealersInfo}
        </div>
      </Grid>
    );
  }

  componentWillMount () {
    GetDealersActions.getDealers();
  }

  _openUpdateDealer = () => {
    console.log(123);
  }
}

@connectToStores
导出默认类组件{
静态上下文类型={
路由器：React.PropTypes.func，
}
静态类型={
标题：React.PropTypes.func，
}
建造师（道具）{
超级（道具）；
此.state={
莫代尔：错，
}
}
静态getStores（）{
返回[GetDealersStore]；
}
静态getPropsFromStores（）{
返回GetDealersStore.getState（）；
}
渲染（）{
让dealersInfo；
if（this.props.dealerData！==null）{
dealersInfo=this.props.dealerData.dealersData.map（函数（经销商）{
返回(
////////////////////////
//////这是按钮/////
//////////////////////
);
});
}否则{
dealersInfo=正在加载…
；
}
返回(
经销商
{dealersInfo}
);
}
组件将安装（）{
GetDealersActions.getDealers（）；
}
_OpenUpdateAler=（）=>{
控制台日志（123）；
}
}

正如你所看到的，有一个声明

if (this.props.dealerData !== null) {
   ...
}else {
   dealersInfo = <p>Loading . . .</p>;
}

if（this.props.dealerData！==null）{
...
}否则{
dealersInfo=正在加载…
；
}

当我在上面粘贴代码时，一切都非常棒，但是如果我添加

，那么一切都会下降，我在屏幕上看到的就是

加载

这是上述语句中的

else

---

<> P> >，我想知道，这里发生了什么反应？

< p>您正在将按钮呈现在<代码>的中间。MAP<代码> >操作：

this.props.dealerData.dealersData.map(function(dealer) {

它使用不同的值来表示此；因此，

this.props

在函数中不存在。我希望在浏览器控制台中看到

无法读取未定义的
的属性dealerData

您需要使用：

手动：

this.props.dealerData.dealersData.map(function(dealer) {
  // ...
}.bind(this));

或使用（因为您使用的是ES6功能）：

是否检查了浏览器控制台中的错误？当您在DOM检查器中查看按钮元素时，它是什么样子的？@Pointy控制台中没有错误。如果按钮没有附加功能，则按钮看起来正常。但由于附加了该功能，我无法可视化按钮，只能
加载您使用的浏览器是什么？我应该在哪里使用箭头功能？我的意思是，我正在使用arrow函数
\u openupdatedaler=（）=>{…}
，你说我必须在哪里使用它？@NietzscheProgrammer arrow函数保留这个词法，所以你会在丢失
这个
的函数中使用它。将
.map（功能（经销商）{
替换为
.map（（经销商）=>{
可以帮助我吗？
this.props.dealerData.dealersData.map(function(dealer) {
  // ...
}.bind(this));

this.props.dealerData.dealersData.map((dealer) => {
  // ...
});