问题是轮盘停止时显示数字。
const data = [
{ id: 1, option: 10 },
{ id: 2, option: -30 },
{ id: 3, option: 50 },
{ id: 4, option: 30 },
{ id: 5, option: 40 },
{ id: 6, option: 20 }
];
export default () => {
const [mustSpin, setMustSpin] = useState(false);
const [prizeNumber, setPrizeNumber] = useState(0);
const handleSpinClick = () => {
const newPrizeNumber = Math.floor(Math.random() * data.length);
setPrizeNumber(newPrizeNumber);
setMustSpin(true);
};
return (
<>
<div align="center">
<h1 align="center">Roulette Game</h1>
<hr />
<Wheel
mustStartSpinning={mustSpin}
prizeNumber={prizeNumber}
data={data}
outerBorderColor={["#f2f2f2"]}
outerBorderWidth={[25]}
innerBorderColor={["#f2f2f2"]}
radiusLineColor={["#dedede"]}
radiusLineWidth={[10]}
textColors={["#ffffff"]}
fontSize={[50]}
perpendicularText={[true]}
backgroundColors={[
"#F22B35",
"#F99533",
"#24CA69",
"#514E50",
"#46AEFF",
"#9145B7"
]}
onStopSpinning={() => {
setMustSpin(false);
}}
/>
<button className="button2" onClick={handleSpinClick}>
SPIN
</button>
<br />
{data.option}
<hr />
</div>
我在上面输入了这段代码,但它显示了 const 数据数组 id = [{ id: 1, option: 10 },{ id: 2, option: -30 },{ id: 3, option: 50 },{ id: 4, 选项: 30 },{ id: 5, 选项: 40 },{ id: 6, 选项: 20 } ];
我尝试了这个但失败了
{data.option}
最佳答案
data
是一个数组,因此它可能没有 option
属性。
看起来 prizeNumber
是伪随机索引,因此要显示选项,请从 data
数组访问它。
{data[prizeNumber].option}
关于arrays - React Custom Roulette如何显示轮盘号码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67941474/