React useState中向对象内数组添加元素失败，求排查问题

问题1：未阻止表单默认提交行为 #

表单提交的默认行为是刷新页面，这会导致组件重新挂载，state被重置为初始值，看起来像是新对象没追加进去。必须在提交函数开头加上e.preventDefault()来阻止这个行为。

问题2：异步更新时的state快照问题 #

setState是异步操作，直接使用state.products可能拿到的是更新前的旧状态，尤其是在连续提交或有其他状态更新的场景下，会导致数组追加失败。正确做法是用函数式更新，接收上一次的state作为参数，确保拿到最新状态。

潜在隐患：依赖表单元素索引取值易出错 #

你用e.target[0]、e.target[1]这种方式取值完全依赖表单元素顺序，一旦表单新增、删除或调整元素顺序，取值就会混乱。建议给每个输入框加上name属性，通过e.target.elements[name].value取值，代码更健壮也更易读。

修正后的完整代码示例 #

function handleSubmit(e) {
  // 阻止页面刷新
  e.preventDefault();
  
  // 假设表单输入框分别设置了name="a"、name="b"、name="c"
  const newProduct = {
    a: e.target.elements.a.value,
    b: e.target.elements.b.value,
    c: e.target.elements.c.value
  };
  
  // 函数式更新，确保基于最新状态修改
  setState(prevState => ({
    ...prevState,
    products: [...prevState.products, newProduct]
  }));
  
  // 可选：提交后清空表单
  e.target.reset();
}

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