React开发：在不崩溃应用的前提下从数组中排除已匹配动物

问题背景 #

开发一款快节奏动物匹配收集游戏：展示两张动物图片，用户可切换上下图，匹配成功后该动物加入图鉴。尝试从animalData（未捕获动物集合）中过滤已收集动物时，出现图片索引快速切换、应用崩溃的问题。

使用Firebase存储数据：

• animalData对应实时数据库unclaimed节点（未捕获动物集合）
• matchedAnimals对应matchedAnimals节点（已收集动物集合）

原测试代码片段：

import React, { useState, useEffect } from "react";

function App() {
  const [animalData, setAnimalData] = useState(["Dog", "Cat", "Bird"]); // 示例数据
  const [matchedAnimals, setMatchedAnimals] = useState([]);
  
  // 模拟匹配操作
  const vote = () => {
    const randomIndex = Math.floor(Math.random() * animalData.length);
    const matchedAnimal = animalData[randomIndex];
    setMatchedAnimals(prev => [...prev, matchedAnimal]);
    setAnimalData(prev => prev.filter((_, index) => index !== randomIndex));
  };
  
  return (
    <div>
      <h2>未捕获动物</h2>
      <ul>
        {animalData.map((animal, index) => (
          <li key={index}>{animal}</li>
        ))}
      </ul>
      <button onClick={vote}>匹配成功</button>
      <h2>已收集动物</h2>
      <ul>
        {matchedAnimals.map((animal, index) => (
          <li key={index}>{animal}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

问题根源 #

1. 索引依赖的不可靠性：用数组索引过滤元素，当animalData长度变化后，后续随机索引计算会基于新数组，若存在Firebase实时监听这类自动触发的渲染逻辑，会导致索引频繁变动，触发无限循环状态更新，最终崩溃。
2. 前后端数据不同步：仅在前端过滤animalData，若Firebase实时监听unclaimed节点，后端数据未更新的话，前端状态会被后端数据覆盖，同时可能触发重复渲染。
3. 并发状态更新冲突：同时修改matchedAnimals和animalData，若存在其他依赖这两个状态的逻辑，可能导致状态更新顺序混乱，引发渲染异常。

解决方案 #

1. 改用唯一标识管理动物数据 #

给每个动物添加唯一ID（而非依赖数组索引），确保过滤操作的准确性：

// 修正后的动物数据结构（含唯一ID）
const initialAnimalData = [
  { id: "dog1", name: "Dog" },
  { id: "cat1", name: "Cat" },
  { id: "bird1", name: "Bird" }
];

2. 结合Firebase实现原子化数据迁移 #

不要在前端过滤数据，而是通过Firebase的原子操作，将匹配成功的动物从unclaimed节点迁移到matchedAnimals节点，确保前后端数据一致：

import { getDatabase, ref, update } from "firebase/database";

// 匹配成功后的Firebase原子操作
const handleMatchSuccess = async (matchedAnimal) => {
  const db = getDatabase();
  const updates = {};
  
  // 将动物添加到已收集节点
  updates[`/matchedAnimals/${matchedAnimal.id}`] = matchedAnimal;
  // 从未捕获节点移除该动物
  updates[`/unclaimed/${matchedAnimal.id}`] = null;
  
  // 原子化执行更新，避免并发问题
  await update(ref(db), updates);
};

3. 实时同步Firebase数据到前端 #

通过Firebase监听unclaimed和matchedAnimals节点，自动同步数据到前端状态，无需手动过滤：

import { getDatabase, ref, onValue } from "firebase/database";
import React, { useState, useEffect } from "react";

function App() {
  const [unclaimedAnimals, setUnclaimedAnimals] = useState([]);
  const [matchedAnimals, setMatchedAnimals] = useState([]);

  useEffect(() => {
    const db = getDatabase();
    // 监听未捕获动物节点
    const unclaimedRef = ref(db, "unclaimed");
    const unclaimedListener = onValue(unclaimedRef, (snapshot) => {
      const data = snapshot.val();
      // 将Firebase存储的对象转为数组
      const animalsArray = data ? Object.values(data) : [];
      setUnclaimedAnimals(animalsArray);
    });

    // 监听已收集动物节点
    const matchedRef = ref(db, "matchedAnimals");
    const matchedListener = onValue(matchedRef, (snapshot) => {
      const data = snapshot.val();
      const animalsArray = data ? Object.values(data) : [];
      setMatchedAnimals(animalsArray);
    });

    // 组件卸载时清理监听
    return () => {
      unclaimedListener();
      matchedListener();
    };
  }, []);

  // 随机选择未捕获动物（示例逻辑）
  const getRandomAnimal = () => {
    if (unclaimedAnimals.length === 0) return null;
    const randomIndex = Math.floor(Math.random() * unclaimedAnimals.length);
    return unclaimedAnimals[randomIndex];
  };

  // 处理匹配成功
  const handleMatch = async () => {
    const matchedAnimal = getRandomAnimal();
    if (!matchedAnimal) return;
    await handleMatchSuccess(matchedAnimal);
  };

  return (
    <div>
      <h2>未捕获动物</h2>
      <ul>
        {unclaimedAnimals.map((animal) => (
          <li key={animal.id}>{animal.name}</li>
        ))}
      </ul>
      <button onClick={handleMatch}>匹配成功</button>
      <h2>已收集动物</h2>
      <ul>
        {matchedAnimals.map((animal) => (
          <li key={animal.id}>{animal.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

4. 避免无限渲染的关键注意事项 #

• 不要在渲染逻辑或无依赖的useEffect中直接修改状态，确保状态更新仅由用户操作或Firebase监听触发。
• 始终使用动物的唯一ID作为React元素的key，而非数组索引，避免索引变化导致的组件重复渲染/卸载异常。

内容的提问来源于stack exchange，提问作者doopsquad