React使用useState更新待办数组需点击两次按钮问题咨询

• React状态更新为异步批量执行：调用setTodoList、setInputTodo后，不会立即修改当前作用域下的状态变量，当前handleSubmit函数执行时拿到的始终是本次渲染周期的旧状态值，所以调用setTodoList后立刻打印todoList拿到的还是更新前的空数组，要等到组件重新渲染后，状态才会更新为新值。
• todoList数组更新逻辑错误：todoList是存储多条待办的数组，你当前直接调用setTodoList(inputTodo)会把数组类型直接覆盖为输入值的类型，而非将新待办追加到原有数组中。正确写法应该是基于之前的状态更新：setTodoList(prevList => [...prevList, inputTodo])
• input状态赋值逻辑错误：输入框的onChange回调中你写的是setInputTodo([e.target.value])，会把原本为字符串类型的inputTodo覆盖为单元素数组，和初始类型不匹配。应该改为setInputTodo(e.target.value)。
• 语法错误：handleSubmit中打印Todo List Array的console.log语句缺少右括号)，会直接导致运行报错。

import { useState, useEffect } from 'react'

const [inputTodo, setInputTodo] = useState("")
const [todoList, setTodoList] = useState([])

function handleSubmit(){
    if (!inputTodo.trim()) return // 可加空值校验避免提交空待办
    console.log(`input Todo: ${inputTodo}`)
    // 基于旧数组追加新待办
    setTodoList(prev => [...prev, inputTodo])
    setInputTodo("")
}

// 新增useEffect监听todoList变化，打印更新后的数组
useEffect(() => {
    console.log(`Todo List Array:`, todoList)
}, [todoList])

return(
    <div className="addTodo__container">
        <div className="add-Todo__inputWrapper">
          <input
            className="add-Todo__input"
            name="todo"
            type="text"
            placeholder="ADD TODO"
            value={inputTodo}
            // 修复input赋值逻辑
            onChange={(e) => setInputTodo(e.target.value)}
            />
        </div>
        <div className="add-Todo__taskButtonContainer">  
         <button className="add-Todo__taskBtn" onClick={handleSubmit}>New Task</button>
        </div>
    </div>
)

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