Есть приложение, которое может добавлять число, которое на 1 больше последнего в списке.
Число можно добавлять в ручную, а можно нажать на старт, тогда обработчик кнопки старт будет через setInterval автоматически добавлять число в список. Но почему timerRef.current всегда равен 6? Откуда эта 6? timerRef.current хранит в себе setInterval.
import React, { useEffect } from 'react';
const List = () => {
const [numbers, setNumbers] = React.useState([1, 2, 3, 4]);
const ulRef = React.useRef();
const timerRef = React.useRef();
React.useEffect(() => {
ulRef.current.addEventListener('scroll', handleScroll)
}, [])
const handleScroll = () => {
console.log('Произошел scroll');
}
const removeScroll = () => {
console.log(ulRef)
ulRef.current.removeEventListener('scroll', handleScroll);
}
const addNumber = () => {
setNumbers(prev =>[...prev, prev[prev.length - 1] + 1]);
}
const start = () => {
timerRef.current = setInterval(addNumber, 1000);
}
const stop = () => {
clearInterval(timerRef.current);
}
useEffect(() => {
console.log(timerRef.current)
})
return (
<>
<ul ref={ulRef}>
{numbers.map((num, i) => <li key={`${num}_${i}`}>{num}</li>)}
</ul>
<button onClick={addNumber}>✅ Добавить число</button>
<button onClick={removeScroll}>❎ Не следить</button>
<button onClick={start}>▶️ Старт</button>
<button onClick={stop}>⏹ Стоп</button>
</>
)
}
export default List;
Простой
