使用单个状态分配多值时的React子组件状态同步异常问题

核心原因 #

你遇到的问题本质是所有子组件共享了同一个状态对象的属性——父组件只维护了一个team对象，所有子组件都绑定到这个对象的pokemon和move属性上，所以修改任何一个子组件的下拉选项，都会同步修改这个公共属性，导致其他子组件的显示跟着变化。

解决方案一：父组件维护数组状态（推荐，保留原需求的统一状态管理） #

把父组件的单个对象状态改成数组，每个数组元素对应一个子组件的独立数据，这样每个子组件修改的都是数组里的专属对象，不会互相影响：

1. 初始化数组状态：

   // 用map生成6个独立的空对象，避免fill导致的引用共享
   const [team, setTeam] = useState(Array(6).fill(null).map(() => ({ pokemon: null, move: null })));
   

2. 渲染子组件时传递对应索引的状态：

   {Array(6).fill(null).map((_, index) => (
     <PokemonCard
       key={index}
       // 传递当前索引对应的子状态
       currentData={team[index]}
       // 传递更新当前子状态的回调
       updateData={(newData) => {
         const updatedTeam = [...team];
         updatedTeam[index] = newData;
         setTeam(updatedTeam);
       }}
     />
   ))}
   

3. 子组件内修改状态并处理空值报错：
   清空字段时报错是因为pokemon变为null后直接访问pokemon.name，用**可选链操作符?.**做空值判断即可：

   // 子组件的宝可梦下拉选择逻辑
   const handlePokemonChange = (e) => {
     const selectedPokemon = pokemons.find(p => p.name === e.target.value);
     updateData({ ...currentData, pokemon: selectedPokemon || null });
   };
   
   // 下拉菜单的value设置（避免null时访问name报错）
   <select 
     value={currentData.pokemon?.name || ""} 
     onChange={handlePokemonChange}
   >
     <option value="">--选择宝可梦--</option>
     {pokemons.map(p => (
       <option key={p.name} value={p.name}>{p.name}</option>
     ))}
   </select>
   

   同理，move相关的下拉也用同样的方式处理空值。

解决方案二：子组件独立维护状态 #

如果不需要实时在父组件同步所有子组件的状态（比如只在提交时收集数据），可以让每个子组件自己管理内部状态：

1. 子组件内声明独立状态：

   const PokemonCard = () => {
     const [pokemon, setPokemon] = useState(null);
     const [move, setMove] = useState(null);
   
     // 下拉选择逻辑直接修改自身状态
     const handlePokemonChange = (e) => {
       const selectedPokemon = pokemons.find(p => p.name === e.target.value);
       setPokemon(selectedPokemon || null);
     };
   
     // ...move的选择逻辑
   };
   

2. 父组件按需收集子组件状态：
   可以通过useRef存储所有子组件的状态引用，或者给子组件添加回调方法，在父组件需要时（比如点击提交按钮）统一获取。

总结 #

不需要强制给每个子组件单独声明状态，通过父组件维护数组状态+空值判断就能实现原需求（统一管理所有子组件状态，且修改互不影响）。如果场景更适合子组件独立管理状态，第二种方案也完全可行。

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