如何在React中将表单提交的输入内容存储到数组中

数组无法持续追加内容的核心问题通常是React状态更新时未使用函数式更新，陷入了闭包陷阱。常规写法setArr([...arr, newVal])只能拿到当前渲染周期的旧数组值，状态批处理时会覆盖之前的更新，导致每次只能存入最新的一个值。

正确实现步骤 #

• 初始化数组状态和输入值状态：
  const [inputVal, setInputVal] = useState('')
const [dataList, setDataList] = useState([])
• 点击提交逻辑使用函数式更新获取上一次的最新数组：

const handleClick = () => {
  // 非空校验，避免存入空内容
  if (!inputVal.trim()) return
  // 用prev参数拿到最新的旧数组，再追加新值
  setDataList(prev => [...prev, inputVal])
  // 提交后清空输入框
  setInputVal('')
}

• 遍历数组渲染列表：

<div className="list-container">
  {dataList.map((item, index) => (
    <p key={index}>{item}</p>
  ))}
</div>

异常排查点 #

如果修改后还是有问题，可以逐一排查以下场景：

• 数组状态是否被错误重置：检查后续逻辑是否有执行setDataList([])清空数组的操作
• 状态定义位置是否正确：不要把数组状态定义在组件内部的嵌套函数、条件判断块中，否则每次组件渲染都会重置状态为初始空数组
• 输入框绑定是否正确：检查输入框的onChange事件是否正常更新inputVal状态，确保提交时能拿到正确的输入内容

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