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);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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