React useRef 中数组操作：正确过滤与更新实践-js教程-PHP中文网

React useRef 中数组操作：正确过滤与更新实践

DDD

发布： 2025-10-27 11:17:17

原创

243人浏览过

react useref 中数组操作：正确过滤与更新实践

在使用 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 属性。

Natural Language Playlist

探索语言和音乐之间丰富而复杂的关系，并使用 Transformer 语言模型构建播放列表。

查看详情

// 假设 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 && (<p>{fetchError}</p>)}
      <Timer time={time} setTime={setTime} />
      <Image handleAction={handleAction} />
      <p>{found}</p>
    </>
  );
}

export default Game;

登录后复制

注意事项与总结

数组方法的非破坏性： 记住 filter(), map(), slice() 等方法返回新数组，而不会修改原始数组。如果需要修改原始数组，可以考虑使用 splice() (但它会改变原数组，与 React 的不可变性原则不太符，除非你明确知道自己在做什么) 或者直接重新赋值。
useRef.current 的重要性： 始终通过 ref.current 访问或修改 useRef 存储的值。useRef 本身是一个对象，current 属性才是真正存储你数据的容器。
useRef 与 useState 的选择： 如果数据的改变需要触发组件重新渲染，那么应该使用 useState。如果数据是可变的，但其改变不需要触发重新渲染（例如本例中隐藏的物品列表），那么 useRef 是一个更合适的选择。

通过理解这些核心概念，你可以更有效地在 React 应用中利用 useRef 处理复杂的数据结构，避免常见的陷阱，并编写出更健壮、更专业的代码。

以上就是React useRef 中数组操作：正确过滤与更新实践的详细内容，更多请关注php中文网其它相关文章！