Как исправить вызов функции диспетчеризации дважды каждый раз после нажатия кнопки в React? - PullRequest
Новая
       131

Как исправить вызов функции диспетчеризации дважды каждый раз после нажатия кнопки в React?

2 голосов
/ 07 мая 2020

Я работал над простой программой, в которой у меня есть массив сообщений, и я хочу обновить отдельные значения каждого объекта сообщения. В этом случае я хочу обновить количество лайков, которые получает сообщение, когда я нажимаю кнопку «Нравится».

Вот код, который у меня есть для редуктора: 

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 каждый раз, когда я нажимаю на нее. Я попытался разобраться сам и найти решение в Интернете, но мне не повезло. Любая помощь приветствуется :)

1 Ответ

3 голосов
/ 07 мая 2020

Похоже, вы изменяете состояние в редукторе с помощью +=, что может привести к неожиданному поведению. Удалите этот и ненужные операторы распространения, и поведение следует очистить. 

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