React函数组件提交表单时无法存入输入，返回空数组问题

1. 先确认输入框的状态绑定是否正确 #

别把输入内容的状态和存储数组的状态搞混，分开维护才不会冲突：

import { useState } from 'react';

function YourComponent() {
  // 单独存输入框的内容
  const [inputValue, setInputValue] = useState('');
  // 存所有提交的条目数组
  const [entrylist, setEntrylist] = useState([]);

  // 输入框的 onChange 事件，实时更新输入状态
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

输入框要正确绑定状态：

<input
  type="text"
  value={inputValue}
  onChange={handleInputChange}
  placeholder="输入内容..."
/>

2. 修正数组的更新逻辑 #

数组是引用类型，不能直接修改原数组，必须基于旧状态生成新数组来更新。你之前用setValue([value])会直接覆盖数组，正确的追加逻辑应该用函数式更新获取旧数组：

const read2List = () => {
  // 先过滤空输入，避免存无效内容
  if (inputValue.trim() === '') return;
  
  // 用 prevList 获取上一次的数组状态，扩展后添加新元素
  setEntrylist(prevList => [...prevList, inputValue]);
  // 提交后清空输入框
  setInputValue('');
};

3. 处理表单提交的异步问题 #

你提交后console.log拿到空数组，是因为React的状态更新是异步的，调用setEntrylist后立刻打印，拿到的还是更新前的旧状态。要验证数组是否更新，用useEffect监听数组变化：

import { useState, useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  console.log('当前存储的条目:', entrylist);
}, [entrylist]); // 只有entrylist变化时才执行

表单提交时要阻止默认刷新行为：

const handleSubmit = (e) => {
  e.preventDefault();
  read2List();
};

表单结构：

<form onSubmit={handleSubmit}>
  {/* 输入框 */}
  <button type="submit">提交</button>
</form>

4. 排查常见错误点 #

• 别用同一个状态变量既存输入又存数组，这会导致输入时直接覆盖数组数据；
• 确认提交按钮的type是submit，或者如果用普通按钮，直接绑定onClick={read2List}；
• 检查组件是否被意外卸载重渲染（比如在条件渲染里），导致状态被重置。

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