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))