Как запретить вложенным отображенным элементам запускать событие onClick дважды

Question

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

let questions = null
if (this.props.questions) {
  questions = this.props.questions.map((question, index) => {
    return (
      <div className={classes.Question} key={question.id}>
        <p>{`${index + 1}) ` + question.value}</p>
        {question.options.map((option, optionIndex) => {
          return ( 
            <label onClick={question.clicked ? null : () => this.props.onSetQuestionAnswer(...params)} key={optionIndex}>{option.value}
              <input type="radio" name="radio" />
            </label>
          )
        })}
      </div>
    )
  })
}

Click event action создатель

export const setOptionForQuestion = (...params) => {
    return async dispatch => {
      try {
        const { data } = await axios.post(`endpoint`, {
          ..body
        })
        if (data.success) {
          dispatch({
            type: actionTypes.SET_ANSWER_OPTION,
            ...dataToReduxStore
          })
        }
      } catch (error) {
        dispatch({
          type: actionTypes.SET_ANSWER_OPTION_ERROR
        })
      }

    }
  }

Answer 1

Вы можете попробовать позвонив event.preventDefault()

export const setOptionForQuestion = (...params,e) => {
    e.stopPropagation()
    e.preventDefault()
    // rest of the code
  }