本文旨在解决在React应用中使用`useRef`管理数组时，进行过滤操作不生效以及判断数组长度错误的问题。核心在于理解`Array.prototype.filter()`方法返回新数组的特性，以及`useRef`对象如何正确访问其内部可变值。通过本文，你将学会如何正确地过滤并更新`ref.current`中的数组，并准确获取其长度。
在React开发中，useRef是一个强大的Hook，常用于在组件的整个生命周期中存储可变值，而这些值的变化不会触发组件重新渲染。这对于管理DOM元素引用、计时器ID或在多次渲染之间需要持久化的非UI数据（如游戏中的隐藏物品列表）非常有用。然而，在使用useRef管理数组时，开发者常会遇到两个常见误区：错误地过滤数组和错误地获取数组长度。
理解Array.prototype.filter()的特性
Array.prototype.filter()方法是JavaScript中一个常用的数组操作方法。它的核心特性是非破坏性，即它不会修改原始数组。相反，它会创建一个新数组，其中包含通过指定回调函数测试的所有元素。
考虑以下代码片段，这是在尝试过滤ref中的数组时常见的错误：
items.current.filter((item) => item.name !== toy);
这段代码的问题在于，filter()方法执行后会返回一个新数组，但这个新数组并没有被赋值回items.current。因此，items.current仍然指向原始的、未经过滤的数组，导致过滤操作看似“没有效果”。
正确过滤并更新useRef中的数组
要正确地过滤useRef中存储的数组，你需要将filter()方法返回的新数组显式地赋值回ref.current。这样才能确保ref中存储的值得到更新。
// 假设 items 是一个通过 useRef([]) 初始化的 ref // item.name !== toy 是你的过滤条件 items.current = items.current.filter((item) => item.name !== toy);
通过这种方式，items.current现在指向的是经过滤的新数组，从而实现了对数组的有效修改。
正确获取useRef中数组的长度
另一个常见错误是尝试直接通过ref对象本身获取数组长度，例如items.length。useRef返回的是一个包含current属性的普通JavaScript对象，而你实际存储的数组是该current属性的值。
// 错误示例：试图直接访问 ref 对象的 length 属性
if (items.length === 0) {
console.log('Winner');
// ...
}items对象本身并没有length属性（除非你手动添加），其length属性将是undefined，或者在某些情况下，如果items被意外地赋值为数组，则可能得到错误的结果。
要正确获取存储在useRef中的数组的长度，你必须通过current属性来访问它：
// 正确示例：通过 items.current 访问数组的 length 属性
if (items.current.length === 0) {
console.log('Winner');
navigate("/leaderboard", { state: time });
}这确保你是在对实际的数组进行操作，而不是对useRef对象本身。
综合示例与注意事项
将上述修正应用到原始代码中，handleAction函数应修改如下：
import { useNavigate } from 'react-router-dom';
import { useState, useEffect, useRef } from "react";
import supabase from "../config/supabaseClient";
import Image from "./image"
import Timer from "./timer";
const Game = () => {
let items = useRef([]); // 使用 useRef 存储非渲染数据
const [fetchError, setFetchError] = useState(null);
const [found, setFound] = useState("");
const [time, setTime] = useState(0);
const navigate = useNavigate();
useEffect(() => {
const fetchOptions = async () => {
const { data, error } = await supabase
.from('items')
.select();
if (error) {
setFetchError('Could not fetch items');
items.current = []; // 确保错误时也初始化为空数组
}
if (data) {
items.current = data; // 将数据赋值给 ref.current
setFetchError(null);
}
}
fetchOptions();
}, []);
function handleAction(click, toy) {
// 查找逻辑保持不变
const item = items.current.find(item => item.name === toy);
if (!item) {
setFound(`Not quite, try again!`);
return;
}
if (click.x > item.left && click.x < item.right) {
if (click.y < item.bottom && click.y > item.top) {
setFound(`Well done! You've found Sarah's ${toy}`);
// 关键修正：将过滤后的新数组重新赋值给 items.current
items.current = items.current.filter((i) => i.name !== toy);
console.log("Updated items in ref:", items.current);
// 关键修正：通过 items.current.length 检查数组长度
if (items.current.length === 0) {
console.log('Winner');
navigate("/leaderboard", { state: time });
}
}
} else {
setFound(`Not quite, try again!`);
return;
}
}
return (
<>
{fetchError && ({fetchError}
)}
{found}
);
}
export default Game;关键注意事项：
- useRef与useState的选择： 当你存储的数据需要触发组件重新渲染时，应使用useState。如果数据仅用于在组件实例的生命周期内持久化，且其变化不应直接导致UI更新，那么useRef是更合适的选择。在这个隐藏对象游戏的例子中，items数组的过滤不需要立即触发UI重新渲染（因为对象是“隐藏的”），所以useRef是合理的。
- filter()的纯粹性： 始终记住filter()、map()、slice()等数组方法返回新数组。如果你想修改原数组，可以考虑使用splice()（它会修改原数组）或重新赋值。
- ref.current的访问： 任何时候需要读取或修改useRef存储的值，都必须通过ref.current属性。
总结
正确使用useRef管理可变数据，特别是数组，需要对JavaScript数组方法的特性以及React useRef的工作原理有清晰的理解。核心要点是：Array.prototype.filter()方法返回一个新数组，因此必须将这个新数组重新赋值给ref.current才能更新ref中存储的数据；同时，访问useRef中存储的数组的任何属性（如length）都必须通过ref.current。掌握这些原则将帮助你更有效地利用useRef来管理组件内部的非渲染状态。
