React Native中useState多关卡数组管理与切换实现求助

我是React Native初学者，现有存储各关卡图片、位置等参数的对象数组，当前代码仅固定调用level_0的数据，希望切换到其他关卡时能使用对应关卡的数组参数，但不知如何操作，可能数组结构或代码逻辑存在问题，请求协助解决。

现有代码： #

状态定义：

const [findObjects, setfindObjects] = useState({
    level_0: [
      { img: require('../obj1.png'), w: 35, h: 50, left: 120, top: 10 },
      { img: require('../obj2.png'), w: 35, h: 50, left: 180, top: 40 },
    ],
    level_1: [
      { img: require('../obj1.png'), w: 35, h: 50, left: 0, top: 0 },
      { img: require('../obj1.png'), w: 35, h: 50, left: 70, top: 170 },
    ],
    level_2: [
      { img: require('../obj1.png'), w: 35, h: 50, left: 510, top: 7 },
      { img: require('../obj2.png'), w: 35, h: 50, left: 170, top: 120 },
  });

隐藏对象函数：

const hiddenObject2 = (index) => {
    let tempFindObjects = { ...findObjects };
    let tempPostList = [...tempFindObjects.level_0];
    tempPostList.splice(index, 1);

    tempFindObjects.level_0 = tempPostList;
    setfindObjects(tempFindObjects);

    if (tempFindObjects.level_0.length == 0) {
      lvl += 1;
      goToMessageScreen();
    }
};

渲染部分：

return (
  <View>
    {findObjects.level_0.map((item, index) => {
      return (
        <TouchableOpacity onPress={() => hiddenObject2(index)} key={Math.random()} style={{ width: "auto" }}>
          <Image
            source={item.img}
            style={[
              gStyle.imgObject,
              {
                width: item.w,
                height: item.h,
                left: item.left,
                top: item.top,
              },
            ]}
          />
        </TouchableOpacity>
      );
    })}
  </View>
)

解决方案： #

核心思路是用状态变量跟踪当前关卡，替换所有硬编码的level_0，让代码动态适配当前关卡：

1. 新增当前关卡状态
   添加状态变量记录当前关卡编号，动态生成对应关卡的key：

   // 初始关卡设为0，对应level_0
   const [currentLevelNum, setCurrentLevelNum] = useState(0);
   // 动态拼接当前关卡的key
   const currentLevelKey = `level_${currentLevelNum}`;
   

2. 修改隐藏对象函数，适配动态关卡
   替换所有硬编码的level_0为currentLevelKey，同时把lvl改成状态变量（直接修改不会触发组件重渲染）：

   // 将lvl转为状态变量
   const [lvl, setLvl] = useState(0);
   
   const hiddenObject2 = (index) => {
       let tempFindObjects = { ...findObjects };
       // 动态获取当前关卡的数组
       let tempPostList = [...tempFindObjects[currentLevelKey]];
       tempPostList.splice(index, 1);
   
       tempFindObjects[currentLevelKey] = tempPostList;
       setfindObjects(tempFindObjects);
   
       // 检查当前关卡对象是否清空
       if (tempFindObjects[currentLevelKey].length === 0) {
           const nextLevel = lvl + 1;
           setLvl(nextLevel);
           // 通关后可直接切换关卡，比如从提示页返回时调用setCurrentLevelNum(nextLevel)
           goToMessageScreen();
       }
   };
   

3. 修改渲染逻辑，动态加载当前关卡对象
   替换固定的level_0为动态key，同时不要用Math.random()当key（会导致组件频繁重建），改用index或给每个对象添加唯一id：

   return (
     <View>
       {findObjects[currentLevelKey].map((item, index) => {
         return (
           <TouchableOpacity onPress={() => hiddenObject2(index)} key={index} style={{ width: "auto" }}>
             <Image
               source={item.img}
               style={[
                 gStyle.imgObject,
                 {
                   width: item.w,
                   height: item.h,
                   left: item.left,
                   top: item.top,
                 },
               ]}
             />
           </TouchableOpacity>
         );
       })}
     </View>
   )
   

4. 关卡切换触发
   当需要切换关卡时，更新currentLevelNum即可自动加载对应关卡数据：

   // 比如从通关提示页返回时调用
   setCurrentLevelNum(nextLevel);
   

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