如何在 React 中使用 Reducer 更新删除后的状态？

Question

从数据库中删除评论后我应该如何更新状态

这是我的删除功能，但我似乎无法弄清楚调度的内容是什么：

    const onCommentDelete = async (id) => {
        const commentId = id
        const response = await commentService.deleteComment(commentId)
        dispatch({
            type: 'COMMENT_DELETE',
            payload: commentId
        })
    }

我也不确定如何从实际 Reducer 的状态中删除此特定注释？我正在尝试这样的事情，但仍然无法正常工作：

    switch (action.type) {
        case 'COMMENT_DELETE':
                return {
                    ...state,
                       comments: state.comments.filter((comment, commentId) 
                      => commentId !== action.payload)
                }  

数据库中的评论是这样的：

[
{
    "_ownerId": "35c62d76-8152-4626-8712-eeb96381bea8",
    "blogId": "0977d18f-fa62-473b-9ee0-16a5d8910d14",
    "comment": "First comment",
    "_createdOn": 1680544822712,
    "_id": "2ce82346-19b9-471c-9ae2-f6efd0b2891c"
}

]

我确实阅读了一些以前的线程，但无法理解如何使用它们中的信息...

Answer 1

我猜这里你的端点只删除评论并且在删除一条评论后不返回新的评论列表，最好是更新它并让它返回新的评论列表，这样你就可以将它作为

action.payload

传递。

否则，在调用 api 调用以删除评论并将其作为

action.payload

传递后，您应该调用另一个 api 来获取所有评论。

Answer 2

您可以做的一个简单步骤是每次发送此操作时重新获取。

您可以通过制作一个名为 isSuccess 的布尔标志（可能）来实现此目的，并且此布尔标志将由 useEffect 中的 deps 数组监视，并且每当它发生更改时，将调用 refetch 回调。

提示：确保你只在它为真时触发回调