如何解决React中每次点击按钮后都会调用两次dispatch函数？

Question

我一直在做一个简单的程序，在这个程序中，我有一个帖子数组，我想更新每个帖子对象的单独值。在这种情况下，我想在点击 "喜欢 "按钮时更新帖子的 "喜欢 "数量。

下面是我为reducer编写的代码。

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

您似乎是在您的reducer中通过使用以下方法突变状态 +=，这可能会导致意外的行为。移除这个和不必要的传播操作符，行为应该会得到清理。

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   
    }
}