React+Ant Design表单提交stock_move_ids携带冗余数据求助

核心原因 #

你提交的stock_move_ids数组混入了事件对象数据，大概率是子组件处理表单值更新时，错误地将事件对象（而非纯业务数据）传入了表单字段或Context状态中。

解决步骤 #

1. 修正子组件的表单值更新逻辑

   • 检查子组件中onChange或表单值绑定的代码，确保传递给表单/Context的是仅包含业务字段的纯对象，而非事件对象或带事件属性的混合对象。
   • 错误示例（混入事件）：

     // 错误：直接把事件e传入数组
     const handleAddItem = (e) => {
       form.setFieldsValue({
         stock_move_ids: [...form.getFieldValue('stock_move_ids'), e]
       });
     };
     

   • 正确示例（仅传业务数据）：

     // 正确：构造仅含业务字段的对象
     const handleAddItem = (itemData) => {
       const newItem = {
         demand: itemData.demand,
         done: itemData.done,
         product_uom: itemData.product_uom,
         product_tmpl_id: itemData.product_tmpl_id
       };
       form.setFieldsValue({
         stock_move_ids: [...form.getFieldValue('stock_move_ids'), newItem]
       });
     };
     

2. 提交前过滤冗余字段
   如果暂时无法修改子组件逻辑，可在父组件的提交函数中对数据做二次过滤，只保留需要的业务字段：

   const handleSubmit = (values) => {
     // 过滤stock_move_ids，仅保留指定业务字段
     const cleanValues = {
       ...values,
       stock_move_ids: values.stock_move_ids.map(item => ({
         demand: item.demand,
         done: item.done,
         product_uom: item.product_uom,
         product_tmpl_id: item.product_tmpl_id
       }))
     };
     // 使用cleanValues发起提交请求
     api.submit(cleanValues);
   };
   

3. 用Form.List规范数组字段管理
   对于嵌套数组类型的表单字段，推荐使用Ant Design的Form.List组件，它能自动管理数组项的表单值，避免手动操作数组时混入无关数据：

   <Form.List name="stock_move_ids">
     {(fields, { add, remove }) => (
       <>
         {fields.map(({ key, name, ...restField }) => (
           <>
             <Form.Item
               {...restField}
               name={[name, 'demand']}
               key={`${key}-demand`}
             >
               <Input placeholder="Demand" />
             </Form.Item>
             <Form.Item
               {...restField}
               name={[name, 'done']}
               key={`${key}-done`}
             >
               <Input placeholder="Done" />
             </Form.Item>
             {/* 其他业务字段的Form.Item */}
             <Button onClick={() => remove(name)}>删除行</Button>
           </>
         ))}
         <Button onClick={() => add()}>添加行</Button>
       </>
     )}
   </Form.List>
   

4. 检查Context状态更新逻辑
   确认Context中更新stock_move_ids状态的代码，是否错误地将事件对象存入了状态。确保更新状态时，仅传入纯业务数据对象。

内容的提问来源于stack exchange，提问作者Gabriel Perdana Budiman