React中useState状态引用不符合预期问题求助

问题原因 #

你遇到的是React闭包陷阱：每次点击addAnimal添加动物时，都会将当前渲染周期的removeAnimal函数绑定到新动物对象的onClick属性上。这个removeAnimal函数会捕获当时的animalList状态值，后续即使animalList更新，旧的removeAnimal函数依然持有旧状态的引用，导致点击删除时打印的是创建该动物时的旧列表。

另外用数组索引作为key也存在隐患，当列表元素顺序变化时可能导致组件渲染异常，建议给每个动物添加唯一标识。

修复方案 #

步骤1：给动物添加唯一ID #

避免因重名动物导致删除错误，同时解决索引key的问题：

const addAnimal = () => {
  const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
  updateAnimalList(prevList => [
    ...prevList,
    { 
      ...randomAnimal,
      id: Date.now() + Math.random(), // 生成唯一ID
    }
  ]);
}

步骤2：修改删除逻辑，使用函数式更新获取最新状态 #

直接在父组件传递删除函数给子组件，避免闭包捕获旧状态：

const removeAnimal = (animalId) => {
  updateAnimalList(prevList => prevList.filter(animal => animal.id !== animalId));
};

步骤3：调整子组件调用方式 #

子组件不再依赖动物对象上的onClick，而是直接接收父组件传递的删除函数：

// 父组件渲染列表部分
{ animalList.map( (animal) => {
  return (
    <Animal key={animal.id} animal={animal} onRemove={() => removeAnimal(animal.id)} />
  )
})}

// Animal组件修改
export function Animal({ animal, onRemove }) {
  return (
    <div className="card">
      <h2>{ animal.name }</h2>
      <button onClick={onRemove}>Remove</button>
    </div>
  )
}

完整修复后代码 #

import { useState } from 'react';
import './App.css';

export default function App() {
  const [animalList, updateAnimalList] = useState([]);

  const animals = [
    {name: 'anaconda'}, {name: 'brachiosaurus'}, {name: 'chimpansee'}, {name: 'dragon'}, {name: 'eagle'}, {name: 'fox'},
    {name: 'giraffe'}, {name: 'hellhound'}, {name: 'iguana'}, {name: 'jackal'}, {name: 'koala'}, {name: 'lion'},
    {name: 'meerkat'}, {name: 'nyan-cat'}, {name: 'ostrich'}, {name: 'pterodactyl'}, {name: 'quail'}, {name: 'rhinoceros'},
    {name: 'sfinx'}, {name: 'triceratops'}, {name: 'unicorn'}, {name: 'vampire deer'}, {name: 'whale'}, {name: 'xiao'},
    {name: 'yoghurt'}, {name: 'zebra'},
  ];

  const addAnimal = () => {
    const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
    updateAnimalList(prevList => [
      ...prevList,
      { 
        ...randomAnimal,
        id: Date.now() + Math.random(),
      }
    ]);
  }

  const removeAnimal = (animalId) => {
    updateAnimalList(prevList => prevList.filter(animal => animal.id !== animalId));
  };

  return (
    <div className="app">
        <button onClick={addAnimal}>addAnimal</button>
        { animalList.map( (animal) => {
          return (
            <Animal key={animal.id} animal={animal} onRemove={() => removeAnimal(animal.id)} />
          )
        })}
    </div>
  );
};

export function Animal({ animal, onRemove }) {
  return (
    <div className="card">
      <h2>{ animal.name }</h2>
      <button onClick={onRemove}>Remove</button>
    </div>
  )
}

关键说明 #

• 使用updateAnimalList(prevList => ...)的函数式更新，确保每次都基于最新的状态修改列表，避开闭包陷阱。
• 用唯一ID代替数组索引作为组件key，保证列表元素的渲染稳定性。
• 将事件处理逻辑从子组件依赖的对象中剥离，由父组件统一管理，避免旧函数捕获旧状态的问题。

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