無法正確反應此功能

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