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