随机反应中的奇怪行为

Question

in my React app, I call shuffle 2 times for 2 different card sets but shuffle always gives 2 card sets the exact same result, can someone help me fix it?

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 gives 2 card sets the same result until I run shuffleCards function again. this is my shuffle function

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 , and cards2 are all pointing to the same array in your example as JavaScript passes array by reference .

The result is that every time you call shuffle , you are modifying and returning the underlying array that was passed to the function, and therefore any variable that was pointing to a result from previously calling shuffle will reflect the most recently shuffled array.

The fix is to create a copy of your array in shuffle so that cards , cards1 , and cards2 all point to different arrays:

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;
};