1

Пишу на React. У меня возникли проблемы с пониманием того, что происходит с состоянием компонента при использовании хука useState совместно с функцией setInterval. Нужного поведения я добился, но в осадке чувствую, что кое-чего недопонял.

Что я пытаюсь реализовать: инкремент и декремент переменной хранимой в состоянии компонента при зажатии указателя на элементе DOM каждые (скажем 200, но это не важно)мс

У меня есть 3 варианта кода, 2 работают не так как задумано, а именно при зажатии "+" значение переменной меняется постоянно в 1 и тут же обратно в 0. Ну и один рабочий вариант.

Я понял, что это можно реализовать при помощи хука useEffect, в принципе мне удалось и без него, но вопрос в другом, почему 2 моих варианта ведут себя не так, как я ожидаю, а один из них все таки работает должным образом?

К слову, работоспособность варианта №3, при условии неработоспособности варианта №2 меня очень сильно удивляет, так как всегда считал подобное равнозначным.

Нерабочий вариант №1:

const IndexPage = function () {
  const [count, setCount] = React.useState(0)
  const [id, setId] = React.useState(null)
  const delay = 200

  function inc() {
    let contextCount = count
    setId(setInterval(setCount, delay, count + 1))
  }

  function dec() {
    let contextCount = count
    setId(setInterval(setCount, delay, count - 1))
  }

  function clean() {
    clearInterval(id)
  }
  return (
    <Layout>
      <h1>{count}</h1>
      <p style={btn} onPointerDown={inc} onPointerUp={clean}>
        +
      </p>
      <p style={btn} onPointerDown={dec} onPointerUp={clean}>
        -
      </p>
    </Layout>
  )
}

export default IndexPage

Нерабочий вариант №2 (только изменённые функции):

function inc() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, ++contextCount)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, --contextCount)
    )
  }

Рабочий вариант:

function inc() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(++contextCount)
      }, delay)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(--contextCount)
      }, delay)
    )
  }

1 ответ 1

0

В варианте: setInterval(setCount, delay, ++contextCount) contextCount увеличивается на 1 и создается замыкание для функции setCount которая будет вызвана с тем же значением. Вот пример:

const func = (count) => {
    console.log(`count`, count);
 };
 
let contextCount = 0;

const id = setInterval(func, 1000, ++contextCount);

setTimeout(() => clearInterval(id), 5000);

В последнем варианите у функции внутри setInterval есть доступ к внешней переменной, поэтому она может изменяться:

let contextCount = 0;

const id = setInterval(() => {
  console.log(`contextCount`, contextCount);
  ++contextCount;
}, 1000);
 
 setTimeout(() => clearInterval(id), 5000);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.