React에서 한 번 배열의 요소를 무작위로 정렬합니다(사용 효과 사용 가능).

나는 반응을 배우는 동안 기발한 솔로 프로젝트를 진행하고 있지만 내 코드를 깨뜨리지 않고 답을 무작위로 제공하는 솔루션을 찾을 수 없습니다. 셔플 기능을 사용해 보았지만 클릭할 때마다 답변 순서가 바뀌었고 임의의 인덱스에 정답을 추가하려고 시도했지만 동일한 문제가 발생했습니다. 코드를 완전히 재구성해야 하는지 아니면 해결 방법이 있는지 확실하지 않습니다. 누군가가 볼 수 있다면 훌륭합니다.

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

보시다시피 모든 정답은 답변 배열의 마지막 위치에 있습니다.

나는 useEffect를 사용하려고 시도했지만 이것이 사용해야 하는 상황인지 정말 확신할 수 없습니다. 이것이 제가 내 코드에 남겨둔 것입니다. 모든 버튼 클릭에서 useEffect 셔플을 제거하면 답변이 잘못된 위치에 배치됩니다. 이 코드를 포함했지만 문제를 측정하기 어려울 수 있으므로 스크림이 첨부됩니다.

const 수정 ID = 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)
    }, [])