React中使用useState钩子实现数组元素增删的问题

核心问题分析 #

你当前的移除功能失效有两个关键原因：

• 直接修改状态数组：emails.splice(index, 1)是直接篡改原状态数组，React无法感知状态变化，不会触发组件重渲染。
• 索引处理错误：你传给RemoveEmail的是map的索引i，但函数里用emails.indexOf(i)查找位置——数组里存的是数值1，当索引i不等于1时，indexOf会返回-1，导致splice(-1)删除最后一个元素，而非目标项。

完整修复代码 #

import { useState } from 'react';

function EmailManager() {
  const [emails, setEmails] = useState([]);

  // 移除指定索引的元素
  const removeEmail = (targetIndex) => {
    // 通过filter创建新数组，排除目标索引项
    setEmails(emails.filter((_, currentIndex) => currentIndex !== targetIndex));
  };

  // 添加新元素（用函数式更新确保拿到最新状态）
  const addEmail = () => {
    setEmails(prevEmails => [...prevEmails, `邮箱-${prevEmails.length + 1}`]);
    // 测试用数值的话可以写：prevEmails => [...prevEmails, prevEmails.length + 1]
  };

  return (
    <div>
      {emails.map((email, index) => (
        <p key={index}>
          {/* 替换为输入框：<input value={email} onChange={(e) => updateEmail(index, e.target.value)} /> */}
          {email}
          <button onClick={() => removeEmail(index)}>移除</button>
        </p>
      ))}
      <button variant="outlined" size="small" onClick={addEmail}>+ 添加另一个</button>
    </div>
  );
}

关键优化点 #

• 状态更新必须生成新数组：添加或移除操作都要通过setEmails传入新数组，绝对不能直接修改原emails数组。
• 直接使用map的索引删除：既然遍历已经拿到了每个元素的索引，直接用这个索引筛选数组即可，无需额外查找。
• 函数式更新更安全：添加元素时用prevEmails => [...prevEmails, ...]，能确保拿到最新的状态快照，避免批量更新时的状态不一致问题。
• 必须加key属性：map渲染列表时要给每个项加唯一key，这里用索引暂时可行，真实业务场景建议用元素的唯一ID。

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