在使用 React `useRef` 管理非渲染数据时，对其中存储的数组进行过滤或修改需要特别注意。本文将深入探讨 `Array.prototype.filter()` 等方法返回新数组的特性，以及如何正确地将过滤后的新数组重新赋值给 `useRef` 的 `current` 属性，确保数据状态的有效更新。同时，也将指出在访问 `useRef` 中数组长度时常见的错误，并提供正确的访问方式。
在 React 应用开发中，useRef 是一个非常有用的 Hook，它允许我们在组件的整个生命周期中存储和访问可变值，而不会触发组件重新渲染。这对于管理 DOM 元素、存储定时器 ID 或像本例中存储不需要触发 UI 更新的数组数据非常适用。然而，当对 useRef 中存储的数组进行操作时，如果不理解 JavaScript 数组方法的行为特性，很容易遇到数据更新无效的问题。
理解 Array.prototype.filter() 的工作原理
Array.prototype.filter() 是一个非破坏性方法，这意味着它不会修改原始数组。相反，它会遍历数组中的每个元素，并根据提供的回调函数返回一个新数组，其中包含所有通过测试的元素。
考虑以下代码片段，这是在 useRef 中尝试过滤数组时常见的问题：
// 假设 items.current 是一个数组，例如：[{ name: 'toy1' }, { name: 'toy2' }]
// 尝试过滤掉名为 'toy' 的对象
items.current.filter((item) => item.name !== toy);
// 此时，items.current 仍然是原始数组，没有任何改变这里的 filter 方法确实返回了一个新数组，其中不包含 name 等于 toy 的元素。但是，这个新数组并没有被赋值给任何变量，更没有被重新赋值给 items.current。因此，items.current 仍然指向原始的、未被过滤的数组。
正确更新 useRef 中存储的数组
要正确地更新 useRef 中存储的数组，我们需要将 filter 方法返回的新数组显式地赋值回 ref.current 属性。
// 假设 items 是一个 useRef 实例 // 正确地过滤并更新 items.current items.current = items.current.filter((item) => item.name !== toy); // 现在，items.current 已经更新为过滤后的新数组
通过这种方式，我们确保了 items.current 始终指向最新的、经过过滤的数组状态。
正确访问 useRef 中数组的长度
另一个常见的错误是，当 items 是一个 useRef 实例时，错误地尝试访问 items.length。useRef 返回的对象本身并没有 length 属性。数组数据实际存储在 items.current 中。
// 错误示例：试图访问 useRef 对象的 length 属性
if (items.length === 0) {
// 这将永远不会为 true，因为 items 是一个 { current: [...] } 对象
console.log('Winner');
}
// 正确示例：访问 useRef.current 中数组的 length 属性
if (items.current.length === 0) {
console.log('Winner');
// 导航到排行榜页面
navigate("/leaderboard", { state: time });
}始终记住，要访问 useRef 存储的实际值，必须通过其 current 属性。
综合示例：隐藏物品游戏中的应用
结合上述修正，以下是隐藏物品游戏 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; // 初始化 useRef 中的数组
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.filter((i) => i.name !== toy);
console.log(items.current);
// 关键修正：正确检查数组长度
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;注意事项与总结
- 数组方法的非破坏性： 记住 filter(), map(), slice() 等方法返回新数组，而不会修改原始数组。如果需要修改原始数组，可以考虑使用 splice() (但它会改变原数组，与 React 的不可变性原则不太符，除非你明确知道自己在做什么) 或者直接重新赋值。
- useRef.current 的重要性： 始终通过 ref.current 访问或修改 useRef 存储的值。useRef 本身是一个对象，current 属性才是真正存储你数据的容器。
- useRef 与 useState 的选择： 如果数据的改变需要触发组件重新渲染，那么应该使用 useState。如果数据是可变的，但其改变不需要触发重新渲染（例如本例中隐藏的物品列表），那么 useRef 是一个更合适的选择。
通过理解这些核心概念，你可以更有效地在 React 应用中利用 useRef 处理复杂的数据结构，避免常见的陷阱，并编写出更健壮、更专业的代码。
