なぜ反応フラックス機能が定義されていないのですか？

Question

私はreactjsアプリを作成しています。それはうまくいく。私は国から緯度と経度を取るために新しいコンポーネントを書いていて、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> 
    ); 
    } 
} 

これは私がを取得していますエラーは次のとおりです。

は、ここに私のコードです。

私はそれが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}>