React组件状态不独立：切换Handler时状态重置原因咨询

你遇到的状态重置问题，核心是React条件渲染导致组件被卸载再重新挂载。

在你的Left组件里，当切换选项卡时，比如从「educational experience」切到「general information」，对应的<Handler><Educational/></Handler>会因为selected === 1不成立而被从DOM树中移除——React会销毁这个Handler组件实例，它的内部状态（childrens数组）自然也就被清空了。等你切回「educational experience」时，React会创建一个全新的Handler实例，状态重新初始化为空数组，看起来就像是状态被“重置”了。

你之前的认知没错：每个React组件实例的状态确实是独立的，但前提是这个实例没有被销毁。现在的情况是，每次切换选项卡，对应的Handler都是重新创建的新实例，而非原来的那个。

既然不想把状态提升到父组件（避免重复代码），最直接的办法是让所有Handler组件始终保持挂载状态，只是通过CSS控制它们的显示与隐藏。这样每个Handler实例的状态就能一直保留。

修改Left组件中form部分的代码：

<div className="form">
  <div style={{ display: selected === 0 ? 'block' : 'none' }}>
    <General data={data} onChange={onChange} />
  </div>
  <div style={{ display: selected === 1 ? 'block' : 'none' }}>
    <Handler> 
      <Educational data={data} onChange={onChange}/> 
    </Handler>
  </div>
  <div style={{ display: selected === 2 ? 'block' : 'none' }}>
    <Handler> 
      <Professional data={data} onChange={onChange}/>
    </Handler>
  </div>
</div>

这里用display: none代替直接移除组件，三个内容区块始终存在于DOM中，只是隐藏不可见。切换选项卡时，只是改变显示状态，组件实例不会被销毁，内部状态自然得以保留。

你的Handler组件在添加子元素时，直接复用传入的children可能会导致一些意外问题（比如所有新增的子组件共享同一个引用，状态同步异常）。可以改成每次添加时创建一个新的元素实例，比如给每个子元素加唯一key：

import { useState } from "react";

export default function Handler({children}){
    const [childrens, setChildrens] = useState([]);

  const addChild = () => {
    // 用当前时间戳作为唯一key，确保每个子元素都是独立实例
    setChildrens(prevChildren => [...prevChildren, React.cloneElement(children, { key: Date.now() })]);
  };
    return(
        <div>
            {childrens}
            <button onClick={addChild}>add</button>
        </div>
    )
}

这样每次新增的子组件都是独立的实例，避免潜在的状态共享问题。

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