2015-11-05 299 views
0

家長:User_Show陣營從父到子傳遞方法不從孩子射擊

兒童:User_Item_Card

任何想法,爲什麼removeItemFromDOM()不在內發射不像() ajax打電話User_Item_Card

這個想法是,unlike()從Rails數據庫中刪除模型。發生這種情況時,我使用removeItemFromDOM()對父引發forceUpdate()所以這將刷新子組件(減去這是已取消的一個)。

User_Show:

var UserShow = React.createClass({ 

getInitialState: function(){ 
    return{ 
     didFetchData: false, 
     userName: [], 
     userItems: [], 
     headerImage: "../users.png" 
    } 
}, 

componentDidMount: function(){ 
    this.fetchData() 
}, 

fetchData: function(){ 
    var params = this.props.params.id 
    $.ajax({ 
     type: "GET", 
     url: "https://stackoverflow.com/users/" + params, 
     data: "data", 
     dataType: 'json', 
     success: function(data){ 
      this.setState({didFetchData: 'true', userName: data.user_name, userItems: data.items, headerImage: data.photo_url}) 
     }.bind(this), 
     error: function(data){ 
      alert('error! couldnt load user into user show') 
     } 
    }) 
}, 

removeItemFromDOM: function(){  // HERE'S WHAT SHOULD FIRE 
    alert('removing from parent') 
    this.forceUpdate() 
}, 

render: function(){ 
    var userItem = this.state.userItems.map(function(item){ 
     return <UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} removeItemFromDOM={this.removeItemFromDOM}/> 
    }) 
    return(
     <div> 
      <Header img_src={this.state.headerImage} /> 

      <section className="body-wrapper"> 
       {userItem}    
      </section> 
     </div> 
    ) 
} 
}) 

User_Item_Card:

var UserItemCard = React.createClass({ 
getInitialState: function(){ 
    return{ 
     itemID: this.props.id, 
     userID: null, 
     userHasLikedItem: null 
    } 
}, 

componentDidMount: function(){ 
    newState = this.currentUserID() 
    this.setState({userID: newState}) 
}, 

currentUserID: function(){ 
    if(App.checkLoggedIn()){ 
     var email = this.currentUserEmail() 
     this.fetchUserID(email) 
    }else{ 
    } 
}, 

currentUserEmail: function(){ 
    return localStorage.getItem('email') 
}, 

fetchUserID: function(email){ 
    $.ajax({ 
     type: "GET", 
     url: "https://stackoverflow.com/users/email", 
     data: {email: email}, 
     dataType: 'json', 
     success: function(data){ 
      this.setState({didFetchData: 'true', userID: data.user_id}) 
     }.bind(this), 
     error: function(data){ 
      alert('error! couldnt fetch user id') 
     } 
    }) 
}, 

addLike: function(){ 
    var data = { 
     itemID: this.state.itemID, 
     userID: this.state.userID 
    } 
    // Submit form via jQuery/AJAX 
    $.ajax({ 
     type: 'POST', 
     url: '/items/' + this.state.userID + '/like', 
     data: data, 
     success: function(data){ 
      alert('like successful!') 
     }.bind(this), 
     error: function(data){ 
      alert('failed to like item!') 
     } 
    }); 
}, 

unLike: function(){ 
    var data = { 
     itemID: this.state.itemID, 
     userID: this.state.userID 
    } 
    // Submit form via jQuery/AJAX 
    $.ajax({ 
     type: 'POST', 
     url: '/items/' + this.state.userID + '/unlike', 
     data: data, 
     success: function(data){ 
      alert('unlike successful!') 
      this.props.removeItemFromDOM() // HERE'S WHERE I'M ATTEMPTING TO FIRE THE METHOD PASSED DOWN FROM THE PARENT 
     }.bind(this), 
     error: function(data){ 
      alert('failed to unlike item!') 
     } 
    }) 
}, 

handleLike: function(e){ 
    e.preventDefault() 
    this.addLike() 
}, 

handleUnLike: function(e){ 
    e.preventDefault() 
    this.unLike() 
}, 


render: function(){ 
    return(
     <div className="card-wrapper"> 
      <Link to="itemShow" params={{id: this.props.id}} className="card-text" > 
       <div className="card-img-wrapper"> 
        <img src={this.props.photo_url} className="card-img" /> 
       </div> 
       {this.props.description} 
      </Link> 

      <br/> 

      <a href="" onClick={this.handleLike}> Like </a> 
      <a href="" onClick={this.handleUnLike}> Unlike </a> 

     </div> 
    ) 
} 
}) 

回答

0

它可能是一個簡單的拼寫錯誤?添加額外的';'幫幫我?

success: function(data){ 
      alert('unlike successful!'); // ADD ; HERE 
      this.props.removeItemFromDOM() // HERE'S WHERE I'M ATTEMPTING TO FIRE THE METHOD PASSED DOWN FROM THE PARENT 
     }.bind(this), 
+0

感謝您尋找@wintvelt。不幸的是,那不是。 – TCannadySF

0

發現了一種解決方案:

上下文是不正確的,當我傳遞給該方法在作爲道具。下面是工作了渲染功能usershow將(父組件):

render: function(){ 
    var that = this // solution 
    var userItem = this.state.userItems.map(function(item){ 
     return <UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} removeItemFromDOM={that.removeItemFromDOM}/> //notice the use of 'that' 
    }) 
    return(
     <div> 
      <Header img_src={this.state.headerImage} /> 

      <section className="body-wrapper"> 
       {userItem}    
      </section> 
     </div> 
    ) 
} 

我還沒有得到真正從DOM刪除元素,但至少警報被解僱從該方法。