从父母传给孩子的反应方法不会从孩子

Question

父母： User_Show

儿童： User_Item_Card

任何想法为什么 removeItemFromDOM（）不会在 User_Item_Card 的不同（） ajax调用中触发？

想法是 unLike（）从Rails数据库中删除模型。发生这种情况时，我使用 removeItemFromDOM（）在父级上触发 forceUpdate（），以便刷新子组件（减去 unliked < / em>的）。

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: "/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: "/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>
    )
}
})

Answer 1

这可能是一个简单的拼写错误吗？添加额外的';'帮助

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

Answer 2

发现了一个解决方案：

当我将方法作为道具传递时，此的上下文不正确。以下是 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中删除，但至少警告是从该方法触发的。