在使用react的`useref`管理非渲染数据时，对存储在其中的数组进行过滤操作是一个常见场景。本文将详细阐述为何`array.prototype.filter()`方法无法直接修改`useref`中存储的数组，并提供正确的更新策略，同时纠正了访问`useref`长度的常见错误，确保数据管理和逻辑判断的准确性。
理解 useRef 与 JavaScript 数组的不可变性
在React应用中，useRef是一个非常有用的Hook，它允许我们在组件的整个生命周期中持久化一个可变的值，而不会触发组件的重新渲染。这使得它非常适合存储不直接影响UI的数据，例如DOM元素的引用、计时器ID或者本例中讨论的非渲染数据数组。
然而，当我们在useRef中存储一个数组并尝试对其进行修改时，一个常见的误解是认为像filter()这样的数组方法会原地修改原始数组。实际上，JavaScript中的许多数组方法，包括filter()、map()、slice()等，都是不可变的。这意味着它们不会修改调用它们的原始数组，而是返回一个包含新结果的新数组。
考虑以下代码片段，它试图从useRef中存储的items.current数组中移除一个元素：
let items = useRef([]); // 假设 items.current 已经包含一个数组// ...// 尝试过滤掉名为 'toy' 的项目items.current.filter((item) => item.name !== toy);// 此时，items.current 并没有被修改！
这段代码的问题在于，filter()方法执行后，会返回一个不包含指定toy的新数组，但这个新数组并没有被赋值回items.current。因此，items.current仍然保持着过滤前的原始数组。
正确更新 useRef 中存储的数组
要正确地更新useRef中存储的数组，我们需要将filter()方法返回的新数组显式地赋值回items.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([]); // 使用 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.x < item.right) { if (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.current:", items.current); // 检查更新后的数组 // 检查数组长度时，也需要访问 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}
在上述代码中，关键的修改是这一行：
items.current = items.current.filter((i) => i.name !== toy);
通过将filter()方法返回的新数组赋值回items.current，我们确保了useRef中存储的数据得到了正确的更新。
另一个常见陷阱：访问 useRef 的长度
除了过滤操作，另一个与useRef相关的常见错误是直接访问ref对象的length属性，而不是其current属性的length。
错误的示例：
if (items.length === 0) { // 错误！items 是一个 ref 对象，不是数组 console.log('Winner'); navigate("/leaderboard", { state: time });}
items本身是一个RefObject，它不具备length属性（除非你把它赋值为一个带有length属性的对象，但这与我们的意图不符）。我们真正想要检查的是useRef所引用的数组的长度，因此必须通过items.current来访问。
正确的做法：
if (items.current.length === 0) { // 正确！访问 ref 引用值的长度 console.log('Winner'); navigate("/leaderboard", { state: time });}
总结与注意事项
filter() 不会原地修改数组： Array.prototype.filter()方法总是返回一个新数组，而不会修改原始数组。要更新数据，必须将新数组重新赋值。useRef 的值通过 .current 访问和修改： 无论是读取还是写入useRef所引用的值，都必须通过其.current属性进行。直接操作ref对象本身（例如items.length）通常是错误的。何时使用 useRef vs useState： 当数据不需要触发组件重新渲染时，useRef是管理可变数据的理想选择。如果数据的变化需要反映在UI上，则应使用useState。在本例中，游戏中的隐藏物品列表不直接渲染，因此useRef是合适的。
通过理解这些核心概念和避免常见陷阱，您可以更有效地在React应用中使用useRef来管理复杂的数据结构。
以上就是深入理解React useRef与数组操作：避免常见陷阱的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533006.html
微信扫一扫 
支付宝扫一扫 
