在 React 中单击按钮后，如何修复每次调用两次调度函数？

Question

我一直在开发一个简单的程序，其中我有一个帖子数组，并且想要更新每个帖子对象的各个值。对于这种情况，我想在点击“赞”按钮时更新帖子的“赞”数。

这是我的减速器代码：

export function postReducer(state, action) {
    switch(action.type) {
        case 'UPDATE_LIKES':
            return (
                state.map(post => post.id === action.id ? {...post, likes: post.likes+=1, ...post } : {...post })
            )
        default:
            return state   
    }
}

这是我在单击时调用按钮事件的代码：

export default function PostItem({ post }) {
    const { dispatch } = useContext(PostContext);

    return (
        <div className="container">
            <div className="post-stats">
                <button className="post-like-button" onClick={() => dispatch({
                    type: 'UPDATE_LIKES', id: post.id
                })}>{post.likes}</button>
            </div>
        </div>
    )
}

我遇到的问题是，每当我点击赞按钮时，“赞”值仅在第一次点击后增加 1，然后每次点击后增加 2。我希望每次单击“喜欢”按钮时都将“喜欢”增加 1。我试图自己弄清楚并在网上找到解决方案，但没有运气。感谢所有帮助:)

Answer 1

您似乎在使用 += 更改减速器中的状态，这可能会导致意外行为。删除这个和不必要的传播运算符，应该清理行为。

export function postReducer(state, action) {
    switch(action.type) {
        case 'UPDATE_LIKES':
            return (
                state.map(post => post.id === action.id ? {...post, likes: post.likes + 1 } : post)
            )
        default:
            return state   
    }
}