如何存储旧数组并将其与新更新的数组 useRef 和 useEffect 进行比较

Question

目前我正在构建一个吊人游戏，我想在其中存储旧array length并将其与new array length进行比较。我知道useRef是我完成这项工作所需要的东西。有人可以帮我解决这个问题吗？

useEffect(() => {

const checkLetter = (event) => {
let letter = String.fromCharCode(event.keyCode).toLowerCase();
if(event.keyCode >= 65 && event.keyCode <= 90) {
setCount(count + 1);
setGuessed(prev => {
const next = [...prev, letter]
counter(next);
return next;
});
} 
}

document.addEventListener('keydown', checkLetter);
return () => {
document.removeEventListener('keydown', checkLetter);
}
}, [guessed, count]);
const counter = (letterArray) => {
let oldArray = letterArray.filter((v, i) => letterArray.indexOf(v) === i);  
// currently oldArray outputs for instance ['a', 'b', 'c'];
// if someone clicks on a new letter for instance 'd', the new updated array becomes ['a', 'b', 'c', 'd']. And if I want to compare the old array with new updated array for instance like: oldArray !== newUpdatedArray, it returns true. 
}

如果当前旧数组['a', 'b', 'c']并且您最近单击了字母D，则新更新的数组将变为['a', 'b', 'c', 'd']。然后我想比较['a', 'b', 'c'] !== ['a', 'b', 'c', 'd'];

Answer 1

数组将由 refs 进行比较，因此即使[] === []也总是返回 false。您可能需要按值进行比较。如果您总是在数组末尾添加字母，则可能只需检查：

const compare = (array1, array2) => {
if (array1.length !== array2.length) {
return false;
}
return array1.every(
(item, index) => item === array2[index]
);
}

如果您只想比较值而不关心顺序：

const isIn = (array1, array2) => {
return array1.every(
return array2.includes(item);
);
}
const compare = (array1, array2) => isIn(array1, array2) || isIn(array2, array1);

您也可以为此使用lodash.difference()。

Answer 2

您可以简单地比较数组长度

const compareArr = (oldArr, newArr) => oldArr.length === newArr.length

如果数组的长度与以前相同，它将返回 true，如果长度已更改，则返回 false。

希望对你有帮助