Question

我已经成功编写了reactjs应用程序。它运作良好。我一直在编写一个新的组件来从State获取lat和long coords，并将它传递给我定义的一个名为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)函数的范围内定义。

请帮忙

Answer 1

你的想法是正确的。

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

至：MapStore.bathrooms.map((bathroom, i, mouseOver) => {

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

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

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

<button onClick={this.handleMouseOver}>

为什么我的反应通量功能没有定义？

1 个答案: