반응 플럭스 기능이 정의되지 않은 이유는 무엇입니까?

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> 
    ); 
    } 
} 

이 내가 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}>