Probleme beim Abrufen dieser Funktion zum korrekten Binden in der Antwort

Question

Meine handleTeamChange-Funktion ist fehlerhaft und kommt als undefined zurück, wenn renderTeamMethod ausgeführt wird. Ich habe versucht, das variable Team wie "this.handleTeamChange.bind (this, team)" auch an, aber nichts weiterzugeben. Ich habe eine Menge verschiedener Möglichkeiten ausprobiert, um die Methode handleTeamChange aufzurufen, aber bisher nur undefined. Irgendwelche Gedanken?

import React, { Component } from 'react'; 
import UserDropdown from './user-dropdown'; 
import { getTeams } from 'api/index.js'; 

let teams = []; 
let selectedTeamID = null; 
let selectedTeamName = 'all_teams'; 
let teamId = ''; 

export default class TopNav extends Component { 
    constructor(props, context) { 
     super(props, context); 
    // this.handleTeamChange = this.handleTeamChange.bind(this); 
    this.state = { 
     teams: [], 
     team: {}, 
     selectedTeamID: null, 
     selectedTeamName: 'All Teams', 
     teamSelection: false 
    }; 
} 

handleClick() { 
    this.setState({ 
     teamSelection: true 
    }); 
} 


componentWillMount() { 
    getTeams().then((response) => { 
     teams = response.data; 
     this.setState({teams: teams}); 
    }); 
} 

renderTeams() { 
      return teams.map(function(team) { 
       if (team.active === true) { 
        return (
         <div 
          onClick={() => { this.handleTeamChange(team) } } 
          className="team-filter-team" 
          key={team.id} 
          value={team.id} >{team.TeamName} 
         </div> 
        ); 
       } 
      }); 
} 

handleTeamChange(team) { 
    console.log(team); 
} 

render() { 
    return (
     <nav className="nav-wrapper"> 
      <img className="logo-medium nav-logo" src={"https://s3-us-west-2.amazonaws.com/mvtrak/MVTRAKbrandmark.png"} /> 
      <div onClick={ this.handleClick.bind(this) } className="team-selected"> { this.state.selectedTeamName } </div> 
      <div className="team-filter-container"> 
       {this.renderTeams()} 
      </div> 
      <UserDropdown /> 
     </nav> 

    ); 
} 

}

Answer 1

die Funktion Körper, wo Sie Teams kartieren nicht auf den Umfang der Komponente gebunden ist, daher this ist undefined.

ändern Sie teams.map(function (team) { ... }) zu z.B. ein dicker Pfeil teams.map((team) => ...):

return teams.filter(team => team.active).map((team) => (
    <div 
    onClick={() => { this.handleTeamChange(team) } } 
    className="team-filter-team" 
    key={team.id} 
    value={team.id} 
    > 
    {team.TeamName} 
    </div> 
))