这个例子模拟了抛硬币。 我想随机化硬币的初始状态。第一次加载页面时,它可以显示头部。下一次,尾巴。为此,我使用Math方法生成的随机数和条件来根据随机数确定硬币的面(偶数显示头部,奇数显示尾部)。 需要在初始渲染时显示该值。
我还想使用React的Hooks将值存储在状态中,以便稍后在我的应用中使用。如何使用钩子设置随机初始状态值?
这是我正在使用的代码。它目前不起作用,我不确定我做错了什么来实现我的目标:
import React, { useState } from 'react';
import './App.css';
function App() {
const [coin, setCoin] = useState(randomizePlayer())
const randomizePlayer = () => {
let number = Math.floor(Math.random() * 10) + 1
return (number % 2 === 0) ? setCoin('Heads') : setCoin('Tails')
}
return (
<div className="App">
The coin is showing {coin}
</div>
);
}
export default App;
我是钩子API的新手,我正在使用这个练习来学习。
任何帮助表示赞赏!
我会重写这段代码如下:
const randomizePlayer = () => {
const number = Math.floor(Math.random() * 10) + 1
return (number % 2 === 0) ? 'Heads' : 'Tails'
}
function App() {
const [coin, setCoin] = useState(randomizePlayer())
return (
<div className="App">
The coin is showing {coin}
</div>
);
}
randomizePlayer
不需要打电话给setState
; useState
的目的是用它收到的任何参数设置状态。
另外要澄清一下:useState
只被召唤一次。如果您希望coin
具有不同的值,则使用此设置执行此操作的方法是重新装入组件(重新加载页面)。