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

Question

我一直在开发一个简单的程序，其中有一个 post 数组，我想更新每个 post 对象的各个值。对于这种情况，我想更新 'likes' a post 在我点击赞按钮时的数量。

这是我的减速器代码：

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

我遇到的问题是，每当我单击“赞”按钮时，'likes' 值仅在第一次单击后递增 1，然后每次单击后递增 2。我希望每次单击“赞”按钮时 'likes' 增加 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   
    }
}

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

How to fix dispatch function calling twice each time after clicking button in React?

javascript

reactjs

react-hooks

dispatch

react-context