`setNum (() => num ++)` не работает, но `setNum (() => num + 1)` - PullRequest
Новая
       1

`setNum (() => num ++)` не работает, но `setNum (() => num + 1)`

0 голосов
/ 13 июля 2020

Я практикую React с использованием хуков и контекста, работая над простым приложением Quiz. Если ответ правильный, оценка должна увеличиться до 1. 

const { qa, questionNumber } = useContext(GlobalContext);
const [score, setScore] = useState(0);

const answerOnClick = (e) => {
  const correct = qa[questionNumber].correct_answer === e ? true : false;

  if (correct) {
    setScore(() => score++);
  }
};

Но я получаю эту ошибку в строке setScore(() => score++);:

TypeError: присвоение постоянной переменной

Я также пробовал if (correct) { score++; setScore(() => score); } и setScore(() => ++score), все еще не работает.

Но когда я пробую setScore(() => score + 1);, теперь он увеличивается!

Я узнал, что оператор Increment является допустимым оператором JS. Разве score++ и score + 1 не эквивалентны? А почему score рассматривать как постоянную переменную? Это изменчиво, правда? Я все еще начинающий разработчик. Может кто-нибудь объяснить, что здесь происходит? Спасибо.

Ответы [ 3 ]

2 голосов
/ 13 июля 2020

Проблема в том, что score определяется как константа. Это означает, что его не следует переназначать. При использовании score++ вы переназначаете его следующим образом score = score + 1, но как сокращение. Вашему интерпретатору JavaScript не нравится, что вы переназначаете переменную, которую вы определили как постоянную. Поэтому вы получите ошибку.

Хук useState предоставляет функцию обновления (в вашем случае setScore), которую вы должны использовать для обновления состояния. Вы не изменяете напрямую значение score. Вы говорите, что отреагируете на инициализацию score с более высоким значением при следующем рендере . Функция компонентов вызывается снова с новым объявлением score, на этот раз с более высоким значением. Как вы правильно заметили, setScore(() => score + 1) работает, однако setScore(score + 1) тоже должно работать.

0 голосов
/ 13 июля 2020

score++/++score изменит состояние. Лучший способ обновить состояние на основе предыдущего состояния - это: 

setScore((prevScore) => prevScore + 1);
0 голосов
/ 13 июля 2020

Вы изменяете состояние, когда делаете score++. Вы не должны изменять состояние в React, потому что setNum имеет asyn c.

https://reactjs.org/docs/react-component.html#setstate

Думайте о setState () как о запросе, а не о немедленная команда для обновления компонента. Для лучшего восприятия производительности React может отложить ее, а затем обновить несколько компонентов за один проход. React не гарантирует немедленного применения изменений состояния.

...