React中useRef管理数组的正确过滤与长度判断-js教程-PHP中文网

React中useRef管理数组的正确过滤与长度判断

霞舞

发布： 2025-10-27 11:04:01

原创

1003人浏览过

react中useref管理数组的正确过滤与长度判断

本文旨在解决在React应用中使用`useRef`管理数组时，进行过滤操作不生效以及判断数组长度错误的问题。核心在于理解`Array.prototype.filter()`方法返回新数组的特性，以及`useRef`对象如何正确访问其内部可变值。通过本文，你将学会如何正确地过滤并更新`ref.current`中的数组，并准确获取其长度。

在React开发中，useRef是一个强大的Hook，常用于在组件的整个生命周期中存储可变值，而这些值的变化不会触发组件重新渲染。这对于管理DOM元素引用、计时器ID或在多次渲染之间需要持久化的非UI数据（如游戏中的隐藏物品列表）非常有用。然而，在使用useRef管理数组时，开发者常会遇到两个常见误区：错误地过滤数组和错误地获取数组长度。

理解Array.prototype.filter()的特性

Array.prototype.filter()方法是JavaScript中一个常用的数组操作方法。它的核心特性是非破坏性，即它不会修改原始数组。相反，它会创建一个新数组，其中包含通过指定回调函数测试的所有元素。

考虑以下代码片段，这是在尝试过滤ref中的数组时常见的错误：

items.current.filter((item) => item.name !== toy);

登录后复制

这段代码的问题在于，filter()方法执行后会返回一个新数组，但这个新数组并没有被赋值回items.current。因此，items.current仍然指向原始的、未经过滤的数组，导致过滤操作看似“没有效果”。

正确过滤并更新useRef中的数组

要正确地过滤useRef中存储的数组，你需要将filter()方法返回的新数组显式地赋值回ref.current。这样才能确保ref中存储的值得到更新。

// 假设 items 是一个通过 useRef([]) 初始化的 ref
// item.name !== toy 是你的过滤条件
items.current = items.current.filter((item) => item.name !== toy);

登录后复制

通过这种方式，items.current现在指向的是经过滤的新数组，从而实现了对数组的有效修改。

正确获取useRef中数组的长度

另一个常见错误是尝试直接通过ref对象本身获取数组长度，例如items.length。useRef返回的是一个包含current属性的普通JavaScript对象，而你实际存储的数组是该current属性的值。

GPTKit

一个AI文本生成检测工具

108

查看详情

// 错误示例：试图直接访问 ref 对象的 length 属性
if (items.length === 0) {
  console.log('Winner');
  // ...
}

登录后复制

items对象本身并没有length属性（除非你手动添加），其length属性将是undefined，或者在某些情况下，如果items被意外地赋值为数组，则可能得到错误的结果。

要正确获取存储在useRef中的数组的长度，你必须通过current属性来访问它：

// 正确示例：通过 items.current 访问数组的 length 属性
if (items.current.length === 0) {
  console.log('Winner');
  navigate("/leaderboard", { state: time });
}

登录后复制

这确保你是在对实际的数组进行操作，而不是对useRef对象本身。

综合示例与注意事项

将上述修正应用到原始代码中，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; // 将数据赋值给 ref.current
        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 = items.current.filter((i) => i.name !== toy);
        console.log("Updated items in ref:", items.current);

        // 关键修正：通过 items.current.length 检查数组长度
        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;

登录后复制

关键注意事项：

useRef与useState的选择： 当你存储的数据需要触发组件重新渲染时，应使用useState。如果数据仅用于在组件实例的生命周期内持久化，且其变化不应直接导致UI更新，那么useRef是更合适的选择。在这个隐藏对象游戏的例子中，items数组的过滤不需要立即触发UI重新渲染（因为对象是“隐藏的”），所以useRef是合理的。
filter()的纯粹性： 始终记住filter()、map()、slice()等数组方法返回新数组。如果你想修改原数组，可以考虑使用splice()（它会修改原数组）或重新赋值。
ref.current的访问： 任何时候需要读取或修改useRef存储的值，都必须通过ref.current属性。

总结

正确使用useRef管理可变数据，特别是数组，需要对JavaScript数组方法的特性以及React useRef的工作原理有清晰的理解。核心要点是：Array.prototype.filter()方法返回一个新数组，因此必须将这个新数组重新赋值给ref.current才能更新ref中存储的数据；同时，访问useRef中存储的数组的任何属性（如length）都必须通过ref.current。掌握这些原则将帮助你更有效地利用useRef来管理组件内部的非渲染状态。

以上就是React中useRef管理数组的正确过滤与长度判断的详细内容，更多请关注php中文网其它相关文章！