配列内の要素をランダムに並べ替える React で一度 (おそらく使用効果を使用) 解決済み

2221 ワード
javascript react テキストリンク
私は反応を学びながらソロプロジェクトのクイズに取り組んでいますが、コードを壊さずに回答をランダムな順序にする解決策を見つけることができません.シャッフル機能を使用しようとしましたが、クリックするたびに回答の順序が変わるだけで、ランダムなインデックスに正しい回答を追加しようとしましたが、同じ問題が発生しました.コードを完全に再構築する必要があるかどうか、または回避策があるかどうかはわかりません.誰かが見てくれたら最高です.

https://scrimba.com/learn/learnreact/fork-of-section-4-solo-project-coc8e46febb53e8d33018993e

ご覧のとおり、すべての正解は回答配列の最後の位置にあります

私は useEffect を使用しようとしましたが、これが使用されるべき状況であるかどうかは本当にわかりません.これは私のコードに残したものです.ボタンをクリックするたびに useEffect シャッフルを削除すると、答えが間違った場所に配置されます.このコードを含めましたが、問題を判断するのが難しい場合があるため、スクリムが添付されています

const correctId = nanoid()
const wrongIds = [ナノイド()、ナノイド()、ナノイド()]
カウンタ = 0 にする

    const correctAnswer = 
                                <button 
                                        value='correct'
                                        id={correctId}
                                        onClick={e => {
                                            changeClass(correctId, 'correct')
                                            props.answerQuestion(e, 'correct')
                                        }}>       
                                {props.result.correct_answer}</button>



    let answers = props.result.incorrect_answers
    let allAnswers = answers.map(answer => {
                        const id = incorrectIds[counter]
                        counter++ 
                        return (
                        <button 
                            value='incorrect'
                            id={id}
                            onClick={e => {
                                changeClass(correctId, 'correct')
                                changeClass(id, 'incorrect')
                                props.answerQuestion(e, 'incorrect')
                            }}>
                        {answer}</button>)})

    allAnswers.push(correctAnswer)

   React.useEffect(function() {
       allAnswers = shuffle(allAnswers)
    }, [])
Scala学習(二)
私と毎日コーディング