ReactJS 随机映射数组

Question

我一直在尝试以随机方式映射数组。我希望数组的每个对象都显示出来。但刷新时的顺序应该始终不同且随机。

const [ list ] = [

        {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},

        {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}

    ];

 {list.map((item) => (...

Answer 1

我认为对数组进行洗牌会更有用。并且您还应该更改常量的定义。你可以尝试这样的事情：const shuffle = arr => [...arr].sort(() => Math.random() - 0.5);const list = [  {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},  {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}];const newList = shuffle(list);console.log(newList);

Answer 2

这是一个具有不可变数据范例的纯函数：const shuffleArray = (arr) => {    // leave arr as it is (immutable data in react)    const copy = [...arr];    // our output array    const output = [];    // while there are items    while (copy.length > 0) {        // removes 1 random element from copy and adds it to output;        output.push(copy.splice(Math.floor(Math.random() * copy.length), 1));    }    // return our random array    return output;};

Answer 3

您应该构建一个函数来随机洗牌项目。尝试下面。const list = [        {id: 0, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 1, img: "img", key: 0, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 2, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 3, img: "img", key: 2, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 4, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 5, img: "img", key: 3, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 6, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 7, img: "img", key: 4, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 8, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false},        {id: 9, img: "img", key: 5, class: "wrap", classFlip: "wrap card-flip", match: false}    ];    const shuffle = array => {  let currentIndex = array.length,    temporaryValue,    randomIndex;  // While there remain elements to shuffle...  while (0 !== currentIndex) {    // Pick a remaining element...    randomIndex = Math.floor(Math.random() * currentIndex);    currentIndex -= 1;    // And swap it with the current element.    temporaryValue = array[currentIndex];    array[currentIndex] = array[randomIndex];    array[randomIndex] = temporaryValue;  }  return array;};console.log(shuffle(list))