本文旨在解决在react应用中使用`useref`管理数组时常见的操作误区。核心在于`array.prototype.filter()`等数组方法会返回新数组而非原地修改，因此必须将过滤结果重新赋值给`ref.current`。同时，强调访问`useref`的值时，务必通过`ref.current`属性，尤其是在检查数组长度时，以确保逻辑的正确性。
理解 useRef 与数组操作的特性
在React开发中，useRef Hook 提供了一种在组件的整个生命周期内持久化可变值的方法，而不会触发组件重新渲染。它通常用于直接访问DOM节点、存储任何可变值（如定时器ID、非受控组件的值），或者在不需要触发UI更新时管理数据。当我们需要处理一个不直接影响渲染，但需要在组件实例中保持其最新状态的数据集合时，例如一个隐藏物品游戏中的物品列表，useRef是一个合适的选择。
然而，在使用useRef存储数组并对其进行操作时，开发者常会遇到一些陷阱，特别是与JavaScript数组方法的特性结合时。
常见的数组过滤误区
考虑以下场景：在一个隐藏物品游戏中，当玩家找到一个物品后，需要将其从物品列表中移除。如果该物品列表存储在useRef中，开发者可能会尝试使用Array.prototype.filter()方法来移除找到的物品，代码可能如下所示：
let items = useRef([]); // 存储物品列表
// ... 其他代码 ...
function handleAction(click, toy){
// 查找物品的逻辑...
const item = items.current.find(item => item.name === toy );
if (item) {
// 尝试过滤掉已找到的物品
items.current.filter((item) => item.name !== toy); // 错误示范
console.log(items.current); // 此时items.current并未改变
}
}问题分析：
Array.prototype.filter()方法不会修改原始数组。它会创建一个新数组，其中包含通过指定回调函数测试的所有元素。因此，仅仅调用items.current.filter(...)并不会改变items.current所引用的数组。原始的items.current数组仍然保持不变，导致物品并没有被成功移除。
正确的数组过滤方式
要正确地从useRef管理的数组中移除元素，你需要将filter()方法返回的新数组重新赋值给ref.current。这样，ref.current就会指向更新后的数组。
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([]); // 存储物品列表
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;
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.xitem.top){
setFound(`Well done! You've found Sarah's ${toy}`);
// 正确的过滤方式：将新数组重新赋值给 items.current
items.current = items.current.filter((i)=>i.name!==toy); // 注意这里使用 i 避免变量名冲突
console.log(items.current); // 此时items.current已更新
// ... 后续的逻辑 ...
}
}else{
setFound(`Not quite, try again!`);
return;
}
}
return(
<>
{fetchError&&({fetchError}
)}
{found}
);
}
export default Game; 
通过items.current = items.current.filter(...)，我们确保了items.current始终指向最新、已过滤的数组。
检查 useRef 数组长度的注意事项
另一个常见的错误是，当需要检查useRef中数组的长度时，错误地访问了ref对象本身的length属性，而不是其current属性所指向的数组的length。
// ... 在 handleAction 函数内部 ...
if(items.length === 0){ // 错误示范：items 是一个 ref 对象，没有 length 属性
console.log('Winner');
navigate("/leaderboard", {state:time});
}问题分析：
items是一个useRef Hook 返回的对象，其结构为{ current: value }。它本身没有length属性。只有items.current（即实际的数组）才具有length属性。因此，items.length会返回undefined或导致其他非预期行为。
正确的长度检查方式
要正确检查useRef中数组的长度，必须通过ref.current.length来访问。
// ... 在 handleAction 函数内部 ...
if(items.current.length === 0){ // 正确示范
console.log('Winner');
navigate("/leaderboard", {state:time});
}总结与最佳实践
- filter()方法返回新数组： 记住Array.prototype.filter()（以及map(), slice()等）不会原地修改原始数组。如果你想更新useRef中存储的数组，必须将这些方法返回的新数组重新赋值给ref.current。
- 始终通过 .current 访问 ref 值： 无论是读取还是修改useRef的值，都必须通过其.current属性。例如，访问数组长度应为ref.current.length，而不是ref.length。
- useRef vs useState： 当数据变化不需要触发组件重新渲染时，useRef是管理可变值的理想选择。如果数据变化需要反映在UI上，则应使用useState。在本例中，由于物品是“隐藏”的，且移除物品不直接导致UI元素的增减，useRef是合适的。同时，useState的异步更新特性也可能导致在同一渲染周期内获取到旧值，而useRef则能提供即时的同步更新。
- 原地修改方法： 如果需要原地修改数组（例如push(), pop(), splice()），这些方法会直接改变items.current引用的数组，不需要重新赋值。但通常，为了保持数据的不可变性，推荐使用filter()等返回新数组的方法。
遵循这些原则，可以避免在React中使用useRef管理数组时常见的逻辑错误，确保应用程序的健壮性和可维护性。
