为什么一段时间后我从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>

建议阅读：Using the Effect Hook

我希望这会有所帮助！