React点击按钮时函数无法获取当前状态的问题

你遇到的是React的闭包陷阱，同时当前的状态管理方式也不符合最佳实践，导致删除时无法获取最新的state。以下是问题分析和修复方案：

问题根源 #

1. 闭包捕获旧值：添加联系人时，删除按钮的onClick回调会捕获当时的insertContactForm和position状态值。后续state更新后，旧回调里的state依然是创建时的旧数据，所以点击删除时打印的不是当前最新状态。
2. 状态存储UI元素：把React组件直接存在state里，会导致组件实例被缓存，无法响应后续状态变化，同时放大了闭包带来的问题。
3. 异步state更新问题：setPosition是异步操作，添加联系人时使用的position还是旧值，可能导致多个组件的key重复，引发渲染异常。

正确实现方案 #

核心思路：状态存储数据而非UI元素，用函数式更新确保获取最新state，通过唯一ID定位要删除的项。

完整代码示例

import { useState } from 'react';

function ContactForm({ contactNumber }) {
  // 你的ContactForm实现
  return <div>联系人表单 {contactNumber}</div>;
}

function DynamicContactForm() {
  // 仅存储联系人的核心数据（这里用唯一ID标识）
  const [contacts, setContacts] = useState([]);

  // 添加联系人：使用函数式更新获取最新状态
  const handleAddContact = (e) => {
    e.preventDefault();
    setContacts(prevContacts => [
      ...prevContacts,
      { id: Date.now() } // 用时间戳生成唯一ID，也可使用uuid库
    ]);
  };

  // 删除联系人：通过唯一ID过滤，同样用函数式更新
  const handleRemoveContact = (e, contactId) => {
    e.preventDefault();
    setContacts(prevContacts => 
      prevContacts.filter(contact => contact.id !== contactId)
    );
  };

  return (
    <div>
      <button onClick={handleAddContact}>添加联系人</button>
      {/* 根据数据动态渲染表单组件 */}
      {contacts.map(contact => (
        <div key={contact.id}>
          <button onClick={(e) => handleRemoveContact(e, contact.id)}>-</button>
          <ContactForm contactNumber={contact.id} />
        </div>
      ))}
    </div>
  );
}

方案优势 #

• 数据与UI分离：state仅存业务数据，渲染逻辑由组件负责，符合React单向数据流的设计理念。
• 避免闭包陷阱：函数式更新prevContacts确保每次操作都基于最新的state，不会出现旧值捕获问题。
• 稳定的唯一标识：用时间戳（或uuid）作为每个联系人的唯一ID，避免依赖position的闭包值，删除逻辑更可靠。

内容的提问来源于stack exchange，提问作者Eric J.