Question

我有一个流程，其中与书籍记录相关联的注释存储在状态中的数组中，并具有POST或DELETE单个记录和数组元素的操作。我有POST操作按预期工作，DELETE API调用工作从数据库中删除我的记录，但我不确定最好的做法是搜索我的数组中新删除的记录，并从数组中删除该值或如果我应该为React组件触发一个刷新方法来显示新更改的数组。

家长状态和功能（问题与deleteCommentsFunc()相关：

class BookFeed extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            comments: []
        };
        this.deleteCommentsFunc = this.deleteCommentsFunc.bind(this);
    }

    componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps");
        console.log(nextProps);
        let commentArr = [];
        nextProps.books.map((book) => {
            book.book_comments.map((comment) => {
                commentArr.push(comment);
            })
        })
        console.log(commentArr)
        this.setState({comments: commentArr});
    }

    deleteCommentsFunc(deletedComment){
        console.log(deletedComment);
        var updatedCommentArr = this.state.comments;
        var index = updatedCommentArr.indexOf(deletedComment.target.value);
        updatedCommentArr.splice(index, 1);
        this.setState({comments: updatedCommentArr});
    }

    render(){
        return (
            <div>
            { 
                this.props.books.map((book, index) => {
                    return (
                        <div className="row">
                            <div className="col-md-6 col-md-offset-3 book-card-container">
                                <BookCard {...book} key={book.bookIdHash} user={this.props.user} />
                                <Comments comments={this.state.comments} key={index} bookId={book.bookIdHash} csrf={this.props.csrf} updateComments={this.updateCommentsFunc} deleteCommentFunc={this.deleteCommentsFunc} user={this.props.user.userId}/> 
                            </div>
                        </div>
                    );
                })
            }
            </div>
        );
    }
}

子函数调用DELETE并传递返回的JSON（只是表示删除成功的1）：

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

正如您可能能够告诉参数值data，如果DELETE成功则包含1对我的deleteCommentsFunc()没有帮助，而我真正需要的是一个值我可以在数组中找到能够删除它。

Answer 1

在React splice()中直接呼叫this.state上的is bad practice，因为它是一种变异方法。

您可以使用spread syntax克隆comments array来保留当前的实施，而不是指向reference。

// Comments.
const comments = [...this.state.comments]

或者，您可以利用Array.prototype.filter()以更少的开销实现相同的目标。

deleteCommentsFunc(bookCommentId){

  // Filter Out Deleted Comment By Comparing Id.
  const comments = this.state.comments.filter((comment) => { 

    // bookCommentId.
    console.log('bookCommentId', bookCommentId)

    // comment.bookCommentId.
    console.log('comment.bookCommentId', comment.bookCommentId)

    // Compare.
    comment.bookCommentId != bookCommentId)
  }

  // Update State.
  this.setState({comments}) 
}

请注意：我不知道您的comment架构是什么（我假设它们objects具有唯一的id道具。您在调用时必须将bookCommentId传递给deleteCommentsFunc()，并可能会调整其中的comment.id引用，以指向comment的实际id丙

Answer 2

由于您有注释ID，因此最好过滤comments数组： filter将返回一个新数组。

deleteCommentsFunc(deletedCommentID){
   var updatedCommentArr = this.state.comments;
   updatedCommentArr.filter(comment => comment.bookCommentId !== deletedCommentID)
   this.setState({comments: updatedCommentArr});
}

在deleteCommentCall内，您可以传递ID：this.props.deleteCommentFunc(bookCommentId)

从数组状态中删除已删除的记录

2 个答案: