Warum ist meine Reaktionsflussfunktion nicht definiert?

Question

Ich habe erfolgreich eine reactjs App geschrieben. Es läuft gut. Ich habe eine neue Komponente geschrieben, um lat und coords aus State zu nehmen und sie an eine Funktion weiterzugeben, die ich handleMouseOver genannt habe und an this im Konstruktor-Zustand gebunden bin, wie in anderen Komponenten definiert, die ich geschrieben habe funktionieren wie erwartet.

Hier ist mein Code:

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

Dies ist der Fehler, den ich immer bin.

Ich denke, es ist nicht im Rahmen der const bathrooms = MapStore.bathrooms.map(function(bathroom, i, mouseOver) Funktion definiert.

Bitte helfen

Answer 1

Ihr Denken ist richtig.

ändern MapStore.bathrooms.map(function(bathroom, i, mouseOver) {

zu: MapStore.bathrooms.map((bathroom, i, mouseOver) => {

auch folgende aussieht wie ein Fehler zu mir:

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

Sie wollen diese Aktion auf Klick passieren oder? Nicht, wenn Sie die Komponente definieren. Ändern Sie dies zu:

<button onClick={this.handleMouseOver}>