深入理解React useRef中数组操作：过滤与长度检查的正确姿势

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并未改变
  }
}

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.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); // 注意这里使用 i 避免变量名冲突
        console.log(items.current); // 此时items.current已更新

        // ... 后续的逻辑 ...
      }
    }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;

// ... 在 handleAction 函数内部 ...
if(items.length === 0){ // 错误示范：items 是一个 ref 对象，没有 length 属性
  console.log('Winner');
  navigate("/leaderboard", {state:time});
}

// ... 在 handleAction 函数内部 ...
if(items.current.length === 0){ // 正确示范
  console.log('Winner');
  navigate("/leaderboard", {state:time});
}