React项目对象传参问题解析：三种调用方式的差异与报错原因

核心前提 #

先明确updateEmail action的定义：它仅接收一个对象参数newData，作用是将newData的属性合并到store的email对象中，完成store数据更新。

三种传参方式的详细分析 #

方法1：actions.updateEmail(...Object.values(localEmailData))（有效） #

• 传参逻辑：localEmailData是对象类型，Object.values(localEmailData)会提取该对象的所有值生成数组，...作为数组展开语法，会将数组的每个元素依次作为参数传给updateEmail。
• 有效原因：你的handleInputChange方法存在写法错误（后续说明），导致localEmailData变成嵌套结构——新对象中包含一个localEmailData属性（值为之前的表单数据对象），以及最新修改的输入字段。此时Object.values(localEmailData)[0]恰好是真正的表单数据对象，而updateEmail仅取第一个参数，因此误打误撞传入了正确的对象，实现了数据更新。

方法2：actions.updateEmail(...localEmailData)（有效但报错） #

• 报错原因：...在函数参数中仅能展开可迭代对象（如数组、字符串、Map等），但普通JS对象不属于可迭代对象，直接展开会抛出Invalid attempt to spread non-iterable instance错误。
• 看似“有效”的原因：错误被标记为Uncaught (in promise)，说明错误发生在异步上下文（你的handleSubmit是async函数），但错误未阻断后续代码执行，或你误将store的其他变化当成了该方法的效果。实际上这种传参方式属于语法错误，完全不应该使用。

方法3：actions.updateEmail(localEmailData)（无效） #

• 失效原因：根源还是handleInputChange的错误写法：

  setLocalEmailData({ localEmailData, [e.target.name]: e.target.value });
  

  这里没有正确展开之前的状态，而是将旧的localEmailData作为新对象的属性嵌套进去，最终localEmailData结构变为：

  {
    localEmailData: { /* 真正的表单数据 */ },
    [输入字段名]: "输入值"
  }
  

  当把这个嵌套对象传给updateEmail时，...newData会把localEmailData嵌套属性和单个输入字段合并到store的email中，而非合并真正的表单数据属性（如projectName、header等），因此store的email未被正确更新，表现为“无效”。

额外修复建议 #

你的handleInputChange写法错误，正确的状态更新应展开之前的状态，避免嵌套：

const handleInputChange = (e) => {
  setLocalEmailData(prevState => ({ 
    ...prevState, 
    [e.target.name]: e.target.value 
  }));
};

修复后，localEmailData会保持正确的扁平结构，此时直接使用actions.updateEmail(localEmailData)就是最规范的传参方式，无需再使用方法1或方法2。

内容的提问来源于stack exchange，提问作者Ibai Fernández