Question

当前，我正在构建一个 Hanging man 游戏，我想在其中存储旧的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

数组将通过引用进行比较，因此即使[] === []也将始终返回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

希望有帮助

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

2 个答案: