洗牌中的奇怪行为React

Question

在我的React应用程序中，我为2个不同的卡片组调用了2次洗牌，但是随机播放总是给2张卡片设置完全相同的结果，有人可以帮我解决吗？

class PairThemUp extends React.Component{
    constructor(props){
        super(props);
        this.state={
            cards1:[],
            cards2:[],
        }
    }

    shuffleCards=()=>{
        const cards=this.props.selectedCards
        const cards1=shuffle(cards)
        const cards2=shuffle(cards)
        this.setState({cards1, cards2})

        const id1=cards1.map(c=>c.id)
        const id2=cards2.map(c=>c.id)
        console.log(id1, id2)
    }

shuffle给2张卡片设置相同的结果，直到我再次运行shuffleCards功能。这是我的随机播放功能

export const shuffle=(a)=> {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

Answer 1

cards，cards1和cards2都指向示例中的相同数组，因为JavaScript通过引用传递数组。

结果是每次调用shuffle时，您正在修改并返回传递给函数的基础数组，因此任何指向先前调用shuffle结果的变量将反映最近洗牌的数组。

修复方法是在shuffle中创建数组的副本，以便cards，cards1和cards2都指向不同的数组：

let shuffle = (a) => {

    let newArr = [].concat(a); // create new array

    for (let i = a.length - 1; i > 0; i--) {

        const j = Math.floor(Math.random() * (i + 1));

        [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
    }

    return newArr;
};