React父子组件交互问题：点击不同子组件后父组件state被重置

问题场景 #

我有Garage父组件和Car子组件，期望点击子组件的Link时，调用父组件通过props传入的点击处理函数，实现父组件内numCars整数状态的递增。

问题现象：单独点击某一个子组件（如car1）的Link时，numCars状态能正常递增（比如点击5次后变为5）；但切换点击另一个子组件（如car2）的Link时，numCars会被重置为0，后续点击该子组件又能正常递增，仿佛每个子组件对应独立的父组件。

代码示例 #

export default function Garage() {
   const [numCars, setNumCars] = useState(0);

   const carHandleClick = (carName) => {
      console.log("Clicked by " + carName); 
      setNumCars(numCars + 1);
   } 

   const cars = [
      {
         name: "car1"
      },
      {
         name: "car2"
      },
      {
         name: "car3"
      }
   ]

   return (
      <ul>
         {cars.map((car) =>
            <Car name={car.name} carHandleClick={carHandleClick}/>   
         }
      </ul>
   );
}

export default function Car( {name, carHandleClick} ) {
   return (
      <li>
         <Link to="..." onClick={() => carHandleClick(name)}>
            {name}
         </Link>
      </li>
   )
}

问题原因 #

这是React闭包陷阱结合缺少组件key导致的问题：

• 组件首次渲染时，carHandleClick函数会捕获当前的numCars初始值（0）。当点击第一个子组件触发状态更新后，父组件重新渲染，会生成新的carHandleClick函数，它捕获的是更新后的numCars值。
• 但因为map渲染Car组件时没有设置唯一key，React无法正确识别每个子组件的身份，会错误地复用旧组件实例。当切换点击另一个子组件时，该子组件可能仍持有首次渲染时的carHandleClick函数（闭包里的numCars还是0），调用setNumCars(0+1)就会把状态拉回1，看起来像是重置为0后递增。

修复方案 #

1. 给子组件添加唯一key：
   利用每个car的唯一name作为key，让React能准确追踪每个子组件的更新：

   {cars.map((car) =>
      <Car key={car.name} name={car.name} carHandleClick={carHandleClick}/>   
   )}
   

2. 使用函数式更新状态：
   改用函数式更新获取最新状态值，彻底避免闭包捕获旧状态的问题：

   const carHandleClick = (carName) => {
      console.log("Clicked by " + carName); 
      setNumCars(prevNum => prevNum + 1);
   }
   

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