Question

我通过使用DELETE和href来确定触发node-fetch路线的正确方法。我原本以为在我的有状态组件中传递一个函数作为我的无状态组件的属性，然后使用它作为链接位置将触发该函数，但它似乎不起作用，现在我第二次猜测我的做法。对我的尝试有没有更好的解决方案？

这是我的有状态组件：

class Comment extends React.Component {

    constructor(props){
        super(props);
        this.state = {};
    }

    commentInformation(e){
        //e.preventDefault();
        console.log("commentInformation function triggered");
        this.deleteComment(this.props.recordIdHash, this.recordCommentId);
    }

    deleteComment(recordId, recordCommentId){
        var body = { recordId: recordId, recordCommentId: recordCommentId };
        var route = 'http://localhost:3000/app/record/' + recordId + '/comment/' + recordCommentId;
        fetch(route, 
            { 
                method: 'DELETE', 
                body: JSON.stringify(body), 
                headers: { 
                    'X-CSRF-Token': 'csrfToken',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => {
                return res.json();
            })  
            .then(data => {
                console.log(data);
                this.props.updateComments(data)
                this.setState({'flash': 'success'});
            }) 
            .catch(err => {
                console.log(err);
                this.setState({'flash': 'error'});
            });
    }

    render(){
        return (
            <div className="record-comment__record">
                <div className="row">
                    <div className="col-md-12">
                        <div className="record-comment__meta">
                            <div className="row">
                                <div className="col-md-8 record-comment__profile">
                                    <img src={this.props.app.picture} className="profile__picture profile__picture--small"/>
                                    <p className="record-comment__info"><b>{this.props.app.fullNameSlug}</b> | <i>{this.props.createdAtDateSlug}</i></p>
                                    <DeleteComment commentUserId={this.props.app.userId} userId={this.props.currentUserId} recordId={this.props.recordIdHash} deleteComment={this.commentInformation} commentId={this.props.recordCommentId}/>
                                </div>
                            </div>
                        </div>
                        <div className="record-comment__body">
                            <div className="row">
                                <div className="col-md-12">
                                    <p>{this.props.comment}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

这是我的<DeleteComment>组件，它将注释用户ID映射到登录的用户ID，如果它们相同，则显示删除href：

const DeleteComment = props => {
    if(props.commentUserId == props.userId){
        return (
            <a href={props.deleteComment} className="record-comment__delete"> | Delete</a>
        )
    } else {
        return null;
    }
}

Answer 1

应该是onClick而不是href：

const DeleteComment = props => {
    if(props.commentUserId == props.userId){
        return (
            <a onClick={props.deleteComment} className="record-comment__delete"> | Delete</a>
        )
    } else {
        return null;
    }
}

此外，我认为您需要在deleteComment组件中绑定Comment方法，以免丢失this引用（请参阅https://reactjs.org/docs/handling-events.html）

class Comment extends React.Component {

    constructor(props){
        super(props);
        this.state = {};
        this.deleteComment = this.deleteComment.bind(this);
    }

}

Answer 2

在你DeleteComment - 组件中，您将函数传递给href ..这是不正确的，因为href需要一个字符串。

您可以改为使用onClick，并将href更改为href="#"或使用<button />

ReactJS - Href触发DELETE方法

2 个答案: