React状态在状态设置器调用前被修改，表单提交新项重复添加问题求助

首先，根据你描述的现象——第一次添加时状态在service调用前就已更新，且新项重复添加两次，结合你的代码片段，我认为问题大概率出在以下几个方向，我们逐一排查：

1. 状态突变：直接修改了items数组而非通过setItems #

React状态是不可变的，如果你在表单输入或其他逻辑中直接修改了items数组（比如用push、splice等方法），会导致状态在setItems调用前就被篡改，而且这种突变不会被React的状态管理系统追踪，进而引发重复添加的问题。

排查点： #

• 检查所有涉及items的代码，确保没有类似以下的错误操作：

  // ❌ 错误：直接修改状态数组
  items.push(newItem);
  items[0].name = 'updated';
  

• 所有对items的更新必须通过setItems完成，比如：

  // ✅ 正确：通过setItems创建新数组
  setItems(prev => [...prev, newItem]);
  setItems(prev => prev.map(item => item.id === targetId ? {...item, name: 'updated'} : item));
  

2. 表单提交事件被触发两次 #

即使你确认handleItemInsert只被调用一次，也可能存在表单提交逻辑重复触发的情况：

• 检查提交按钮的设置：如果使用Antd的Button组件，不要同时设置htmlType="submit"和onClick事件——前者会触发表单的onFinish，后者会额外触发一次点击逻辑，导致两次提交。

  // ❌ 错误：重复触发提交
  <Button htmlType="submit" onClick={handleItemInsert}>提交</Button>
  
  // ✅ 正确：仅通过表单的onFinish处理提交
  <Form onFinish={handleItemInsert}>
    {/* 表单内容 */}
    <Button htmlType="submit">提交</Button>
  </Form>
  

• 确认没有在useEffect或其他钩子中重复绑定onFinish事件，导致多次注册提交回调。

3. 异步逻辑的意外副作用 #

虽然你排除了StrictMode的影响，但仍需检查service.addNewItemAsync是否存在副作用：

• 确保service.addNewItemAsync没有修改传入的item参数（比如给item添加id等属性），如果item是引用类型，修改它会间接影响到可能已存在于items中的对象（如果之前不小心添加过）。
• 确认service.addNewItemAsync没有意外调用setItems或其他修改状态的逻辑——后端请求服务应该是纯函数，只负责返回新实体，不操作前端状态。

4. 调试技巧：追踪状态更新的所有时机 #

为了精准定位问题，你可以给setItems添加日志，追踪每一次状态更新的来源：

setItems((prevItems) => {
  console.log('📌 状态更新：当前items', prevItems, '新增项', newItem);
  const updatedItems = [...prevItems, newItem];
  console.log('📌 更新后items', updatedItems);
  return updatedItems;
});

同时，在所有可能修改items的地方添加日志，确认哪些操作触发了状态更新，以及更新的时机是否符合预期。

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