[英]How can I prevent changing sequence of options in my quiz app in react?
我正在尝试制作一个测验应用程序来做出反应。 我从 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;
当我单击任何选项时,我想防止更改选项顺序。 我怎样才能解决这个问题?
您可以通过随机化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>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.