如何防止在我的測驗應用程序中更改選項順序？

Question

我正在嘗試制作一個測驗應用程序來做出反應。 我從 firebase 獲取數據。 我在 jsx 中編寫了代碼塊，用於將正確的選項和錯誤的選項結合在一起，同時也對選項進行洗牌。 但是當我點擊一個選項時，選項的順序會立即改變。 每次我點擊它時，順序都會一遍又一遍地變化。 我嘗試了 preventDefault 和 React.memo 但我無法修復它。 這是我在 function 組件中的代碼塊

function ExercisePage() {
    const [exercises, setExercises] = useState([])
    const [current, setCurrent] = useState(0)
    const [userAnswers, setUserAnswers] = useState([])
    const length = exercises.length
    let topicName = useLocation()
    let newTopicName = topicName.state.state
    const navigate = useNavigate()

    const nextSlide = (e) => {
        e.preventDefault()
        setCurrent(current === length - 1 ? 0 : current + 1)

    }
    const prevSlide = (e) => {
        e.preventDefault()
        setCurrent(current === 0 ? length - 1 : current - 1)
    }

    useEffect(() => {
        onSnapshot(collection(db, 'exercises-data-' + topicName.state.state), snapshot =>
            setExercises(
                snapshot.docs.map(doc => ({
                    id: doc.id,
                    data: doc.data()
                }))
            )
        )
    }, [])
    const handleClickAnswer = (e, index) => {        
        userAnswers[index] = e.target.textContent
        setUserAnswers([...userAnswers])
    }
    const finishExam = () => {

        let answer = window.confirm('are you sure?')
        if (answer) {
            navigate('/finalscore', { state: { userAnswers, newTopicName } })
        }
    }
    return (
        <div className='slideBody'>

            <div className='mainSlide'>
                <FaArrowAltCircleLeft className='left-arrow' onClick={(e) => prevSlide(e)} />
                <FaArrowAltCircleRight className='right-arrow' onClick={(e) => nextSlide(e)} />
                {
                    exercises.map(({ id, data }, index) => (
                        <div className={index === current ? 'data active' : 'data'} key={id}>
                            {
                                index === current &&
                                <div className='slide' >
                                    <div className='dataHead'><div>{data.head}</div> <div>soru {index + 1}</div></div>
                                    <div className='dataImage'><img src={data.image}></img></div>
                                    <div className='dataQue'>{data.question}</div>
                                    <div>
                                        {
                                            (data.rightOption + ',' + data.wrongOptions).split(',').sort(()=>0.5-Math.random()).map((option) =>
                                                (
                                                    <div
                                                        key={id}
                                                        className='options'
                                                        id={option}
                                                        onClick={(e) => handleClickAnswer(e, index)}
                                                    >
                                                        {option}                                                       
                                                    </div>
                                                    
                                                ))                                                                                      
                                        }
                                        
                                    </div>
                                </div>}
                        </div>
                    ))
                }
            </div>
            <div className='finishExamContainer'>
                <button className='finishExam' onClick={finishExam}>Finish Exam</button>
            </div>

        </div>
    )
}
export default ExercisePage;

當我單擊任何選項時，我想防止更改選項順序。 我怎樣才能解決這個問題？

Answer 1

您可以通過隨機化useEffect中的選項並將exercises作為依賴項傳遞來解決此問題。

useEffect(()=> {
  onSnapshot(collection(db, 'exercises-data-' + topicName.state.state), snapshot => 
    setExercises(
      snapshot.docs.map(doc => {
        const arr = doc.data();
        const data = arr.map(
          ({ id, data }, index) => { 
            data.options = (data.rightOption + ',' + data.wrongOptions).split(',').sort(()=>0.5-Math.random());
            return data;
        });
        return {
          id: doc.id,
          data,
        }
      })
    )
}, [])

和

    return (
  <div className='slideBody'>

      <div className='mainSlide'>
          <FaArrowAltCircleLeft className='left-arrow' onClick={(e) => prevSlide(e)} />
          <FaArrowAltCircleRight className='right-arrow' onClick={(e) => nextSlide(e)} />
          {
              exercises.map(({ id, data }, index) => (
                  <div className={index === current ? 'data active' : 'data'} key={id}>
                      {
                          index === current &&
                          <div className='slide' >
                              <div className='dataHead'><div>{data.head}</div> <div>soru {index + 1}</div></div>
                              <div className='dataImage'><img src={data.image}></img></div>
                              <div className='dataQue'>{data.question}</div>
                              <div>
                                  {
                                      (data.options.map((option) =>
                                          (
                                              <div
                                                  key={id}
                                                  className='options'
                                                  id={option}
                                                  onClick={(e) => handleClickAnswer(e, index)}
                                              >
                                                  {option}                                                       
                                              </div>
                                              
                                          ))                                                                                      
                                  }
                                  
                              </div>
                          </div>}
                  </div>
              ))
          }
      </div>
      <div className='finishExamContainer'>
          <button className='finishExam' onClick={finishExam}>Finish Exam</button>
      </div>

  </div>
)