在使用 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.currentitems.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.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}
注意事项与总结
数组方法的非破坏性： 记住 filter(), map(), slice() 等方法返回新数组，而不会修改原始数组。如果需要修改原始数组，可以考虑使用 splice() (但它会改变原数组，与 React 的不可变性原则不太符，除非你明确知道自己在做什么) 或者直接重新赋值。useRef.current 的重要性： 始终通过 ref.current 访问或修改 useRef 存储的值。useRef 本身是一个对象，current 属性才是真正存储你数据的容器。useRef 与 useState 的选择： 如果数据的改变需要触发组件重新渲染，那么应该使用 useState。如果数据是可变的，但其改变不需要触发重新渲染（例如本例中隐藏的物品列表），那么 useRef 是一个更合适的选择。
通过理解这些核心概念，你可以更有效地在 React 应用中利用 useRef 处理复杂的数据结构，避免常见的陷阱，并编写出更健壮、更专业的代码。
以上就是React useRef 中数组操作：正确过滤与更新实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532945.html
微信扫一扫 
支付宝扫一扫 
