reactjs 如何使用onClick事件在div中显示非重复的随机文本?

rdlzhqv9  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(174)

我的想法是做一个问答卡游戏,当你点击一个按钮,你会得到一个随机的问题在模态,所有这一切的工作。我的问题是:我怎么做才能使已经出来的问题不再出现?例如,如果我得到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>
    )
}

非常感谢您的提前回答

slmsl1lt

slmsl1lt1#

问得好!
我所要做的是,每次使用一个问题时,它都会从数组中删除,因此即使changeOrange()再次选择相同的数字,它也不能返回相同的问题。
您可能要使用的方法是拼接

Arrayrange = arrayOrange.splice(newIndex, 1)

更多详细信息,请访问:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
然后,您可以只使用切片问题,而不是使用选定的orangeArray索引来驱动屏幕上的数据。
大概是这样的:

function changeOrange() {
let newIndex = Math.floor(Math.random() * (Arrayorange.length - 0) + 0);
setQuestion(Arrayorange.slice(newIndex, 1)) //this gets the question and puts it in state
Arrayorange = Arrayorange.slice(newIndex, 1) // this ensures the same question can't be chosen ever again
}

edit:已将接合变更为切割

相关问题