如何为React动态数组映射的每个项管理独立状态变量？

你的问题核心是所有数组项共享了同一个isVisible状态，导致定时器触发后所有组件同步切换，而且动态新增的数组项会直接进入!isVisible的状态。当然可以给每个数组项设置独立状态，下面给两种实用方案：

方案1：父组件维护每个索引的独立状态 #

用对象存储每个数组索引对应的可见状态，配合useEffect监听数组变化，为每个项单独设置定时器：

const Parent = ({ array }) => {
  const [visibleStates, setVisibleStates] = useState({});

  useEffect(() => {
    // 初始化所有数组项的可见状态为true
    const initialStates = array.reduce((acc, _, index) => {
      acc[index] = true;
      return acc;
    }, {});
    setVisibleStates(prev => ({ ...prev, ...initialStates }));

    // 为每个项设置独立定时器
    const timers = array.map((_, index) => {
      return setTimeout(() => {
        setVisibleStates(prev => ({ ...prev, [index]: false }));
      }, 1000);
    });

    // 组件卸载或数组变化时清理定时器
    return () => timers.forEach(timer => clearTimeout(timer));
  }, [array]);

  return array.map((item, index) => {
    const isVisible = visibleStates[index] ?? true;
    return (
      <div key={index}>
        {isVisible && <Child>{item}</Child>}
        {!isVisible && <Child2>{item}</Child2>}
      </div>
    );
  });
};

方案2：拆分独立子组件（更推荐） #

把每个数组项的逻辑封装成单独的子组件，让子组件自己管理状态和定时器，代码更简洁易维护，尤其适合动态数组的场景：

const ItemContainer = ({ item }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
    }, 1000);
    // 清理定时器防止内存泄漏
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {isVisible && <Child>{item}</Child>}
      {!isVisible && <Child2>{item}</Child2>}
    </div>
  );
};

const Parent = ({ array }) => {
  return array.map((item, index) => (
    <ItemContainer key={index} item={item} />
  ));
};

原代码问题说明 #

原代码的单个isVisible状态是所有组件共享的，定时器触发后会一次性把所有项切换到Child2。如果数组是动态更新的，新增的项会直接继承已经变为false的isVisible状态，根本不会显示Child组件，这就是你看到后续项始终渲染Child2的原因。

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