如何使用条件钩子和反应钩子设置随机初始状态? [英] How can I set a randomized initial state using a conditional and React Hooks?
本文介绍了如何使用条件钩子和反应钩子设置随机初始状态?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
此示例模拟掷硬币。
我想随机化硬币的初始状态。页面第一次加载时可能会显示标题。下一次,反面。为此,我使用由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;
我是Hooks 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
具有不同的值,则使用此安装程序执行此操作的方法是重新装入组件(重新加载页面)。
这篇关于如何使用条件钩子和反应钩子设置随机初始状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文