Uncaught (in Versprechung) ReferenceError: <function> ist nicht definiert

Question

Ich bin wirklich neu zu ReactJs und derzeit kämpfen, um ein onClick-Ereignis zu erstellen, das den href-Wert von sich nimmt und es an eine Funktion namens "Aktion" übergeben.

Die Aktionsfunktion sollte dann das Standardverhalten des Browsers verhindern, eine GET-Anfrage an die übergebene URL ausführen und ein Alarmdialogfeld mit der Antwort und dem Status anzeigen.

Allerdings steckte ich versuche, meine Funktion aus dem OnClick-Ereignis mit den folgenden Fehler zu nennen:

Uncaught (in promise) ReferenceError: action is not defined

var Content = React.createClass({ 
    getInitialState: function() { 
     return { 
      teams: [] 
     } 
    }, 

    componentDidMount: function() { 
     const makeRequest =() => axios.get("http://localhost:5000/api/teams").then(({ data }) => this.setState({ teams: data })); 

     this.serverRequest = makeRequest(); 

     this.poll = setInterval(() => { 
      this.serverRequest = makeRequest(); 
     }, 10000) 
    }, 

    componentWillUnmount: function() { 
     this.serverRequest.abort(); 

     clearInterval(this.poll) 
    }, 

    action: function(e) { 
     e.preventDefault(); 

     $.get(e.href, function(res, status) { 
      alert("Response: " + res + "\nStatus: " + status); 
     }); 
    }, 

    render: function() { 
     const { teams } = this.state; 

     return (
      <div className="list-group"> 
       { teams.map(function(team) { 
        return ([ 
         <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ action }>Click Me</a> 
        ]); 
       })} 
      </div> 
     ) 
    } 
}); 

ReactDOM.render(<Content />, document.getElementById('content')); 

Answer 1

Versuchen this.action statt action.

UPDATE

fand ich das Problem. Es geht um Umfang. Sie können this innerhalb map nicht zugreifen.

render: function() { 
    const { teams } = this.state; 

    return (
     <div className="list-group"> 
      { teams.map((team) => { 
       return ([ 
        <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a> 
       ]); 
      })} 
     </div> 
    ) 
} 

Answer 2

Es ist eine Bindung Problem, das versuchen, wird es funktionieren:

render: function() { 
    const { teams } = this.state; 

    return (
     <div className="list-group"> 
      { teams.map((team,i)=>{ 
        return <a key={i} href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a> 
       }) 
      } 
     </div> 
    ) 
} 

Vorschlag: Jedes Mal, wenn dynamisch HTML-Elemente zu schaffen, weisen immer den eindeutigen Schlüssel zu jedem Element wird key Wert Ihrer Komponenten halten eindeutig identifiziert.

Von Facebook React Doc:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.