在 React 中随机排列数组中的元素一次（可能使用 Use effect）

Question

我正在做一个奇怪的独立项目，同时学习反应，但无法找到一个解决方案来随机给出答案而不破坏我的代码。我曾尝试使用随机播放功能，但这只会导致答案的顺序随着每次点击而改变，我还尝试在随机索引处添加正确答案，但同样的问题发生了。不确定我是否必须完全重组我的代码或者是否有解决方法。如果有人能看一下就太好了。

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

我曾尝试使用 useEffect 但不确定是否应该使用它，这正是我在代码中留下的内容。删除每个按钮上的 useEffect 洗牌点击将答案放在错误的位置。我已经包含了这段代码，但可能很难判断问题所在，所以附加了稀松布

        const incorrectIds = [nanoid(), nanoid(), nanoid()]
        let counter = 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)
        }, [])```

Answer 1

我通过在使用效果中设置随机排序数组的状态仅在 props.result 更改

时更改来解决问题

const [randomArray, setRandomArray] = React.useState([])

React.useEffect(function() {
setRandomArray(shuffle(allAnswers))
}, [props.result])

在 React 中随机排列数组中的元素一次（可能使用 Use effect）

Randomly order elements in an array Once in React (Possibly using Use effect)

javascript

arrays

shuffle

reactjs

use-effect