Состояние не мутирует с крючками React

Question

Почему он постоянно регистрирует 0 каждую секунду после выполнения runTimer?

const [timer, setTimer] = useState(0)
 const runTimer = (x) => {
   let interval = setInterval(() => {
     setTimer(prev => prev - 1)
     console.log(timer)
   }, 1000)
 }

Answer 1

Значение находится в области видимости и всегда будет одинаковым

Попробуйте зарегистрировать значение снаружи, так как изменение состояния вызовет рендеринг. Кроме того, государство никогда не должно "мутировать". Состояние всегда должно быть новым объектом, а не мутацией.

const [timer, setTimer] = useState(0)
 const runTimer = (x) => {
   let interval = setInterval(() => {
     setTimer(prev => prev - 1)
   }, 1000)
 }
 console.log(timer)

Ваш второй вопрос

Область действия let interval означает, что вы можете только clearInterval на этом уровне. Я не уверен в хорошем способе сделать это с помощью этого метода. Вы, вероятно, хотите использовать хук useEffect для установки интервала.

Answer 2

setTimer - это асинхронный вызов c, вы не сможете получить timer сразу после установки состояния.

useEffect здесь для спасения.

useEffect(() => {
    // your action
}, [timer]);

Вы всегда получите обновленное значение timer.