Почему я получаю то же значение из случайной функции в ReactJS через некоторое время?

Question

Я хочу генерировать случайное значение целого числа в диапазоне [0, 5] при каждом нажатии кнопки. Первоначально я получаю некоторые случайные значения на консоли. Но после нескольких щелчков на консоли несколько раз появляется один и тот же номер. Почему?

'' '

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [selected, setSelected] = useState(0)
  const myRandom = Math.floor(Math.random() * 6)  

  console.log("selected", selected)
  console.log("myRandom", myRandom)

  return (
      <div>
      <button onClick={() => {setSelected(myRandom) } } >next</button>
      </div>  
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

' ''

Answer 1

Вероятно, лучший способ справиться с этим - использовать правильную функцию для события onClick и useEffect() перехватчиков для захвата изменений значений состояния, которые вы можете записать на консоль.

Попробуйте сделать следующее:

const [selected, setSelected] = useState(0);

const generateNewNumber = () => {
   setSelected(prev => Math.floor(Math.random() * 6));
}

useEffect(() => {
    console.log("selected", selected);
}, [selected]);

return <div>
  <button onClick={() => generateNewNumber()}>
     next
   </button>
</div>

Рекомендуется прочитать: Использование крюка эффектов

Надеюсь, это поможет!