React表单onSubmit提交后仅在下一次提交时才显示值的问题

问题原因 #

你遇到的现象是两个React状态使用的常见问题导致的：

• 你提供的代码中没有编写待办列表的渲染逻辑，需要在JSX中遍历todos数组渲染每一条待办内容，页面才会展示最新的待办数据。
• 你在setTodos之后直接打印todos拿到的是旧值，这是因为React的状态更新是异步批量执行的：调用setTodos后，当前handleSubmit函数作用域内的todos仍然是本次渲染周期对应的旧值，不会立刻变成更新后的值，所以此时打印拿到的还是更新前的数组。

修复方案 #

补充待办列表渲染逻辑，如果你需要获取更新后的todos值，可以通过useEffect监听todos的变化实现。另外你当前用输入内容作为id会导致输入重复内容时出现key重复报错，建议加入时间戳保证唯一。

修复后的完整代码如下：

import React, { useState, useEffect } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todos, setTodos] = useState([]);

  // 监听todos变化，获取最新值
  useEffect(() => {
    console.log("最新待办列表：", todos);
  }, [todos])

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = inputValue.trim();
    if (name === "") return;
    setTodos((prevTodos) => {
      return [...prevTodos, { 
        id: `${name}_${Date.now()}`, // 避免id重复
        name: name, 
        isComplete: false 
      }];
    });
    setInputValue("");
  };

  return (
    <main>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          className="todo-input"
          placeholder="Create a new todo..."
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </form>
      {/* 待办列表渲染逻辑 */}
      <div className="todo-list">
        {todos.map(todo => (
          <div key={todo.id} className="todo-item">
            {todo.name}
          </div>
        ))}
      </div>
    </main>
  );
}

export default App;

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