如果我在`map`中的`onClick`中引用方法，爲什麼我的組件會中斷？

Question

現在我的代碼中最愚蠢的事情正在發生。我有一個項目在DOM中呈現的列表，我需要把一個按鈕，以調用另一個功能，如果我把這樣的按鈕<button></button>一切都很好，但如果我分配一個功能，該按鈕，然後一切都會下降<button onClick={function}></button>我會告訴你我的代碼，看看

@connectToStores 
export default class Dealers extends Component { 

    static contextTypes = { 
    router : React.PropTypes.func, 
    } 

    static propTypes = { 
    title : React.PropTypes.func, 
    } 

    constructor (props) { 
    super(props); 
    this.state = { 
     modal : false, 
    } 
    } 

    static getStores() { 
    return [ GetDealersStore ]; 
    } 

    static getPropsFromStores() { 
    return GetDealersStore.getState(); 
    } 
    render() { 
    let dealersInfo; 
    if (this.props.dealerData !== null) { 
     dealersInfo = this.props.dealerData.dealersData.map(function(dealer) { 
     return (<div key={dealer.DealerId} style={Styles.dealerCard}> 
       <Card> 
       <CardHeader title={dealer.NickName} 
          subtitle={dealer.DealerId} 
          avatar={dealer.Picture}/> 
       <CardText> 
        <FloatingActionButton> //////////////////////// 
        <IconAdd /> //////THIS IS THE BUTTON///// 
        </FloatingActionButton>////////////////////// 
       </CardText> 
       </Card> 
      </div> 
     ); 
     }); 
    } else { 
     dealersInfo = <p>Loading . . .</p>; 
    } 

    return (
     <Grid> 
     <Row> 
      <Column><h4>Dealers</h4></Column> 
     </Row> 
     <div style={Styles.mainCont}> 
      {dealersInfo} 
     </div> 
     </Grid> 
    ); 
    } 

    componentWillMount() { 
    GetDealersActions.getDealers(); 
    } 

    _openUpdateDealer =() => { 
    console.log(123); 
    } 
} 

，你可以看到有一個說法

if (this.props.dealerData !== null) { 
    ... 
}else { 
    dealersInfo = <p>Loading . . .</p>; 
} 

我粘貼上面的代碼一切正常真棒，但如果我添加<FloatingActionButton onClick={this._openUpdateDealer.bind(this)}><IconAdd /></FloatingActionButton>然後一切都下降，我在屏幕上看到的全部是Loading . . .，這是陳述中的else 以上。

所以，我想知道，這裏的反應是怎麼回事？

Answer 1

你在一個.map操作的中間渲染按鈕：

this.props.dealerData.dealersData.map(function(dealer) { 

其使用this不同的值;因此，該函數內部不存在this.props。我期望在瀏覽器控制檯中看到cannot read property dealerData of undefined。

您需要使用the optional thisArg parameter：

this.props.dealerData.dealersData.map(function(dealer) { 
    // ... 
}, this); 

手動bind the mapping function to this：

this.props.dealerData.dealersData.map(function(dealer) { 
    // ... 
}.bind(this)); 

或使用an arrow function（因爲你正在使用ES6功能）：

this.props.dealerData.dealersData.map((dealer) => { 
    // ... 
});