React Native应用中currentSlot全局变量自动重置问题求助

为什么currentSlot会自动重置？ #

你用var currentSlot=0声明的是普通变量，React组件每次重新渲染（比如调用setcolorX更新状态时），这个变量都会被重新初始化回0，所以才会出现递增后又重置的情况。React组件的状态必须用React提供的状态管理机制来保存，才能在渲染周期中保留值。

修复方案 #

1. 改用useState管理currentSlot状态 #

把普通变量换成React的useState钩子，这样currentSlot的变化会触发组件重新渲染，且值会被React保留：

import { useState } from 'react';

// 在组件内部声明状态
const [currentSlot, setCurrentSlot] = useState(0);

2. 优化颜色状态为数组（可选但更简洁） #

你现在用了10个单独的color0-color9状态，改成数组状态可以彻底避免冗长的switch语句：

// 初始化长度为10的数组，默认值设为空字符串
const [colors, setColors] = useState(Array(10).fill(''));

3. 修改对应函数适配新状态 #

更新setCurrentSlot和onSelectColor函数：

const incrementCurrentSlot = () => {
  // 限制最大不超过9
  if (currentSlot < 9) {
    setCurrentSlot(prev => prev + 1);
  }
};

const onSelectColor = ({ hex }) => {
  if (currentSlot > 9) {
    Alert.alert('Maximum number of colors reached (10). Tap color to delete.');
    return;
  }
  // 更新对应位置的颜色
  setColors(prev => {
    const newColors = [...prev];
    newColors[currentSlot] = hex;
    return newColors;
  });
};

4. 渲染侧边小View的示例 #

用数组状态渲染10个小View，还能轻松添加删除功能：

{colors.map((color, index) => (
  <View
    key={index}
    style={{
      width: 30,
      height: 30,
      backgroundColor: color || '#eee', // 未选颜色时的默认背景
      marginVertical: 5,
      borderRadius: 4
    }}
    onPress={() => {
      // 点击删除对应位置的颜色
      setColors(prev => {
        const newColors = [...prev];
        newColors[index] = '';
        // 可选：如果删除的是当前slot或之前的位置，回退currentSlot
        if (index === currentSlot) {
          setCurrentSlot(prevSlot => Math.max(prevSlot - 1, 0));
        } else if (index < currentSlot) {
          setCurrentSlot(prevSlot => prevSlot - 1);
        }
        return newColors;
      });
    }}
  />
))}

保留原10个单独状态的修复（如果不想改数组） #

如果暂时不想调整颜色状态的结构，至少要把currentSlot改成useState：

const [currentSlot, setCurrentSlot] = useState(0);

const setCurrentSlotHandler = () => {
  if (currentSlot < 9) {
    setCurrentSlot(prev => prev + 1);
  }
};

const onSelectColor = ({ hex }) => {
  switch(currentSlot) {
    case 0:
      setcolor0(hex);
      break;
    case 1:
      setcolor1(hex);
      break;
    case 2:
      setcolor2(hex);
      break;
    case 3:
      setcolor3(hex);
      break;
    case 4:
      setcolor4(hex);
      break;
    case 5:
      setcolor5(hex);
      break;
    case 6:
      setcolor6(hex);
      break;
    case 7:
      setcolor7(hex);
      break;
    case 8:
      setcolor8(hex);
      break;
    case 9:
      setcolor9(hex);
      break;
    default:
      Alert.alert('Maximum number of colors reached (10). Tap color to delete.');
  }
};

这样修改后，currentSlot的值会在组件重新渲染时被React保留，不会再自动重置为0。

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