ReactJs嘗試在Ajax加載元素之前附加onclick處理程序

Question

我正在爲ReactJs中的菜單創建動態列表。每個菜單項的數據都是通過AJAX從JSON文件中提取的。當菜單項被點擊時我想關閉菜單。當點擊其中一個菜單項時，我將整個列表顯示爲「whenClicked」的道具。下面是代碼：

var MenuList = React.createClass({ 
    getInitialState: function() { 
     return {data: []} 
    }, 
    componentWillMount: function() { 
     $.ajax({ 
      url: 'http://10.0.0.97:8888/public-code/data/data.json', 
      dataType: 'json', 
      success: function(data) { 
       this.setState({data: data}); 
      }.bind(this), 
      error: function(xhr, status, error) { 
       var err = JSON.parse(xhr.responseText); 
       console.log(err.Message); 
      } 
     }); 
    }, 
    render: function() { 
     var list = this.state.data.map(function(menuItemProps) { 
      return <MenuItem onClick={this.props.whenClicked} {...menuItemProps} key={menuItemProps.id} /> 
     }); 
     return (
      <ul id="menu-list"> 
       {list} 
      </ul> 
     ) 
    } 
}); 

的「whenClicked」託則在名爲「handleClick」這改變了菜單的狀態，並關閉它，如果它是開放的父菜單觸發功能。這裏是父菜單組件包含上面的菜單列表組件的代碼：

module.exports = React.createClass({ 

    getInitialState: function() { 
     return {open: false, mobi: false} 
    }, 
    handleClick: function() { 
     this.setState({open: !this.state.open}) 
    }, 
    closeOnMobiScroll: function() { 
     /* 
     if(this.state.mobi === false) { 
      this.setState({open: false}) 
     } 
     */ 
    }, 
    updateDimensions: function() { 
     $(window).width() >= 767 ? this.setState({mobi: true}) : this.setState({mobi: false}); 
    }, 
    componentWillMount: function() { 
     this.updateDimensions(); 
    }, 
    componentDidMount: function() { 
     $(window).on("resize", this.updateDimensions); 
    }, 
    componentWillUnmount: function() { 
     $(window).on("resize", this.updateDimensions); 
    }, 
    render: function() { 
     return (

      <div id="menu" className={(this.state.open ? 'open' : '')} > 
       <div id="menu-inner-wrap"> 
        <MenuTitle /> 
        <MenuToggle whenClicked={this.handleClick}/> 
        <MenuList whenClicked={this.handleClick}/> 
       </div> 
      </div> 

     ) 
    } 

}); 

的問題是，整個腳本的AJAX調用火災之前中斷，並出現以下錯誤：

Uncaught TypeError: Cannot read property 'whenClicked' of undefined 

因爲我看不到我的AJAX控制檯中的「失敗」的消息，我懷疑的問題是，反應是試圖加載我的數據之前，接線

onClick={this.props.whenClicked} 

。

有沒有辦法解決這個問題？還有什麼我失蹤？

Answer 1

該問題與Ajax調用或React無關。

傳遞給.map的回調中，this指全局對象，不組件。全局對象沒有prop屬性，因此是錯誤。

您可以使用.bind給函數的this值綁定到組件：

this.state.data.map(function(...) { ... }.bind(this)); 

更多信息：How to access the correct `this` context inside a callback?

Answer 2

看起來你需要綁定映射函數的適當的範圍內。嘗試：

var list = this.state.data.map(function(menuItemProps) { 
    return <MenuItem onClick={this.props.whenClicked} {...menuItemProps} key={menuItemProps.id} /> 
}.bind(this));