我的想法是做一个问答卡游戏,当你点击一个按钮,你会得到一个随机的问题在模态,所有这一切的工作。我的问题是:我怎么做才能使已经出来的问题不再出现?例如,如果我得到question3,它不会在整个游戏中再次出现。
const Arrayorange = [
{
question: "question 1",
reply: "Reply 1",
},
{
question: "question 2",
reply: "Reply 2",
},
{
question: "question 3",
reply: "Reply 3",
}
];
export function Orange() {
const [stateModal, changeStateModal] = useState(false)
const [index, setIndex] = useState(0);
function openandchange(){
changeOrange();
openModal();
}
function changeOrange() {
let newIndex = Math.floor(Math.random() * (Arrayorange.length - 0) + 0);
setIndex(newIndex);
}
function openModal(){
changeStateModal(!stateModal)
}
const audio = new Audio(cardsound)
function openwithsound(){
openandchange();
audio.play()
}
return (
<div>
<button className="btn" onClick={openwithsound}><IoIosBody/></button>
<ModalOrange
state={stateModal}
changeState={changeStateModal}
titulo="Question"
>
<Content>
<h1>{Arrayorange.[index].question}</h1>
<p>{Arrayorange.[index].reply}</p>
</Content>
</ModalOrange>
</div>
)
}
非常感谢您的提前回答
1条答案
按热度按时间slmsl1lt1#
问得好!
我所要做的是,每次使用一个问题时,它都会从数组中删除,因此即使changeOrange()再次选择相同的数字,它也不能返回相同的问题。
您可能要使用的方法是拼接
更多详细信息,请访问:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
然后,您可以只使用切片问题,而不是使用选定的orangeArray索引来驱动屏幕上的数据。
大概是这样的:
edit:已将接合变更为切割