问卷组件删除功能异常：React State状态更新错误求助

核心问题1：event.target指向错误 #

你点击删除按钮上的×符号时，event.target实际指向的是这个符号对应的文本节点（而非绑定了data-section-id的<button>元素）。这个子节点没有data-section-id属性，导致idToDelete变成undefined，进而让过滤逻辑出现异常：

• 当idToDelete为undefined时，section.sectionId !== undefined的判断会出现不符合预期的过滤结果（比如你点击章节1时得到长度为0，大概率是部分章节的sectionId未正确赋值，或判断逻辑因类型不匹配出现意外反转）；
• 偶尔点击按钮空白区域时，event.target才会指向按钮本身，此时能拿到正确的sectionId，删除逻辑才会正常工作（比如你点击章节4时得到正确结果）。

核心问题2：状态更新依赖旧值 #

你的代码中直接使用questionaryState.sections来生成新数组，但setQuestionaryState是异步操作，questionaryState可能不是最新的状态，这会导致删除操作基于旧数据，进一步放大结果异常的概率。

解决步骤 #

1. 替换event.target为event.currentTarget

currentTarget始终指向绑定事件处理函数的元素（也就是你的<button>），无论你点击按钮的哪个区域，都能正确获取data-section-id：

const handleDeleteSection = (event) => {
  // 使用currentTarget而非target，确保拿到按钮本身的data属性
  const idToDelete = event.currentTarget.dataset.sectionId;
  // 后续逻辑...
};

2. 基于最新状态更新数组

在setQuestionaryState的函数式更新中，使用prevState来获取最新的章节数据，确保过滤操作基于最新状态：

const handleDeleteSection = (event) => {
  const idToDelete = event.currentTarget.dataset.sectionId;
  setQuestionaryState((prevState) => ({
    ...prevState,
    sections: prevState.sections.filter(
      (section) => section.sectionId !== idToDelete
    )
  }));
};

3. 额外验证：确保sectionId类型一致

注意dataset获取到的值都是字符串类型，如果你的section.sectionId是数字，需要将idToDelete转为数字后再比较，避免类型不匹配导致的判断错误：

const idToDelete = parseInt(event.currentTarget.dataset.sectionId, 10);

验证方法 #

修改后，点击删除按钮的任意区域（包括×符号），都应该能正确获取对应的sectionId，过滤后的数组长度也会符合预期（比如4个章节删除1个后长度为3）。

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