无法正确反应此功能

Question

我的handleTeamChange函数出错，并且在renderTeamMethod运行时返回为undefined。我试图像“this.handleTeamChange.bind（this，team）”那样传递变量队，但是没有。我已经尝试了很多不同的方法来调用handleTeamChange方法，但迄今为止没有定义。有什么想法吗？

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

函数体在那里你映射的球队没有被绑定到组件的范围，因此this是undefined。

将teams.map(function (team) { ... })更改为例如胖箭头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> 
))