为什么我的反应通量函数没有定义？答案

【问题标题】：Why is my react flux function not defined?为什么我的反应通量函数没有定义？
【发布时间】：2017-01-25 01:28:18
【问题描述】：

我已经成功编写了一个 reactjs 应用程序。它运作良好。我一直在编写一个新组件，以从 State 获取经纬度坐标并将其传递给我定义的名为 handleMouseOver 的函数，并将其绑定到 this 在构造函数状态中定义。与其他组件中的方式相同我已经按预期写了作品。

这是我的代码：

'use strict';

import React from 'react';


import MapStore from '../../../stores/MapStore';

require('styles/Nav/Nav.scss');

export default class BathroomList extends React.Component {
  constructor() {
    super();
    this.handleMouseOver = this.handleMouseOver.bind(this);
    this.state = {
      lat: MapStore.getLat(),
      long: MapStore.getLong()
    }
  }

  handleMouseOver () {
    console.log( 'Hover' + Date.now() )
    MapActions.setBathroomListMap(this.state.lat, this.state.long)
  }

  render() {
    let listSrc = MapStore.bathrooms.listSrc;
    const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver) {
      return (
        <div key={i}>
          <div className='bathroom-list' key={i}>
            <button onClick={this.handleMouseOver()} ><h1> {bathroom.bathroomName}</h1></button>
            <h2>{bathroom.description}</h2>
            <div className='dates'>
              <div className='date'>Found: {bathroom.date_found}</div>
              <div className='date'>Confirmed: {bathroom.last_confirmed}</div>
            </div>
          </div>
        </div>
      );
    });

    return (
      <div>
        {bathrooms}

        <div className='bathroom-map'>
          <iframe src={listSrc} className='map-frame' />
        </div>
      </div>
    );
  }
}

这是我收到的错误BathroomList.js?ddeb:31 Uncaught TypeError: Cannot read property 'handleMouseOver' of undefined。

我认为它没有定义在 const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver) 函数的范围内。

请帮忙

【问题讨论】：

标签： reactjs ecmascript-6 state flux

【解决方案1】：

你的想法是正确的。

更改MapStore.bathrooms.map(function(bathroom, i, mouseOver) {

收件人：MapStore.bathrooms.map((bathroom, i, mouseOver) => {

以下内容对我来说似乎是一个错误：

<button onClick={this.handleMouseOver()}>

您希望在点击右键时执行此操作？不是在定义组件时。将其更改为：

<button onClick={this.handleMouseOver}>

【讨论】：