React提交时无法将状态变量添加到状态数组问题排查

错误根源 #

1. setList回调未返回新状态：你在setList的回调里只执行了prevList.unshift(inputData)和打印操作，没有返回任何值。React会将这个回调的返回值作为新的list状态，第一次执行后list就变成了undefined，第二次点击时prevList是undefined，调用unshift自然触发报错。
2. 违反状态不可变性：unshift是直接修改原数组的方法，React状态设计为不可变类型，直接修改原状态会导致状态更新检测异常，后续可能引发渲染问题。

修复后的完整代码 #

import React from "react";

import "./App.css";

export default function App() {
  const [inputData, setInputData] = React.useState("");
  const [list, setList] = React.useState([]);

  function handleChange(event) {
    const value = event.target.value;
    setInputData(value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // 过滤空输入
    if (!inputData.trim()) return;
    
    setList((prevList) => {
      // 用展开运算符创建新数组，将新元素放在开头
      return [inputData, ...prevList];
    });
    setInputData("");
  }

  return (
    <div className="container">
      <div>
        <h1>TO DO LIST</h1>
      </div>
      <div>
        <form>
          <input type="text" value={inputData} onChange={handleChange} />
          <button onClick={handleSubmit}>Add Item</button>
        </form>
      </div>
      <div>
        <h3>当前任务：</h3>
        <ul>
          {list.map((task, index) => (
            <li key={index}>{task}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

额外优化说明 #

• 移除了handleChange里多余的event.preventDefault()，输入框onChange事件无默认行为需要阻止。
• 简化了setInputData的写法，无需函数式更新（仅当新状态依赖旧状态时才需要）。
• 添加空输入过滤，避免无效任务被添加。
• 新增任务列表渲染逻辑，直观展示添加的待办项。

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