Обнуляется счётчик при изменении в форме (React JS)

Question

в общем проблема такова, у меня есть форма на React JS в модальном окне, реализованая через Material UI.

<RadioGroup aria-label="test" name="test" value={answer} onChange={handleChange}>
                        <FormControlLabel value={test.a1[0]} control={<Radio />} label={test.a1[0]} />
                        <FormControlLabel value={test.a1[1]} control={<Radio />} label={test.a1[1]} />
                        <FormControlLabel value={test.a1[2]} control={<Radio />} label={test.a1[2]} />
                        <FormControlLabel value={test.a1[3]} control={<Radio />} label={test.a1[3]} />
                    </RadioGroup>

В ней, как можно заметить, есть onChange которая меняет state

const [answer, setAnswer] = useState("");

const handleChange = (e) => {
        setAnswer(e.target.value)
    }

И также, есть кнопочка, которая выполняет некоторую функцию handleSubmit

<Button type="submit" onClick={handleSubmit} color="primary">Submit</Button>

const handleSubmit = () => {
           if (answer == "") {
               alert("!")
           } else {
            qCount += 1
            console.log(qCount)
           }
    }

Ну и так же есть переменная let qCount = 1 По логике, при выборе одного из вариантов формы и нажатии на кнопку Submit, qCount должен увеличиться на 1 и вывестись в консоль. Собственно в чём проблема, я выбираю один из вариантов, и нажимаю кнопку, всё идёт по плану и переменная увеличивается на 1, но стоит мне выбрать другой вариант и нажать кнопку снова, как счётчик обнуляется, и всё идёт сначала. То есть, пока одна метка radio активна, то кнопка работает, как только будет выбрана другая, счётчик обнуляется. Я думаю что в этом как то замешана функция handleChange, но как именно понятия не имею.

Вопрос: Почему так и как это исправить?

Answer 1

qCount это не переменная а состояние по идее когда ты сделаеш

const [qCount , setQCount ] = useState(1)

по идее проблема должна исчезнуть. На счет проблемы

setAnswer(e.target.value)

setAnswer запускает перересовку и заново обновляется переменная let qCount = 1

БЛОГ НА HUSL

Обнуляется счётчик при изменении в форме (React JS)

Ответы (1 шт):