React中点击按钮将输入框值存入数组的问题排查与修复

问题原因 #

• 表单默认提交行为导致页面刷新：按钮位于<form>标签内，默认类型为submit，点击后会触发表单提交流程，页面刷新后组件重新初始化，数组回到初始空状态，表现为“被清空”。
• 数组状态更新写法错误：当前setItem(...item, name.firstName)将数组元素拆分为多个参数传递给setItem，但setItem需要接收完整的新数组对象，这种写法会导致状态更新逻辑异常。

修复方法 #

1. 阻止表单默认提交行为 #

给按钮添加type="button"属性，避免触发表单提交：

<button type="button" onClick={handlePushNameToArray}>Push to array</button>

或者在点击事件中手动阻止默认行为：

const handlePushNameToArray = (e) => {
  e.preventDefault();
  setItem([...item, name.firstName]);
};

2. 修正数组状态更新逻辑 #

使用扩展运算符创建新数组，遵循React状态不可变更新原则：

setItem([...item, name.firstName]);

该写法基于原数组生成新数组，并追加新元素，确保状态更新符合React的机制。

完整修复代码 #

import React, { useState } from "react";

const HookCounter5 = () => {
  const [item, setItem] = useState([]);
  const [name, setName] = useState({ firstName: "" });
  
  const handlePushNameToArray = () => {
    setItem([...item, name.firstName]);
  };
  
  return (
    <div>
      <form>
        <input
          type="text"
          value={name.firstName}
          onChange={(e) => setName({ ...name, firstName: e.target.value })}
        />
        <button type="button" onClick={handlePushNameToArray}>Push to array</button>
        <div>{JSON.stringify(item)}</div>
      </form>
    </div>
  );
};

export default HookCounter5;

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