React Todo列表addItems函数状态无法即时更新的解决方法咨询

你的问题出在React的useState状态更新是异步批量执行的，调用setList后，list并不会立刻完成更新，所以紧接着的console.log(list)输出的还是更新前的旧值。

两种可行的解决方法： #

方法1：用useEffect监听list状态变化

如果需要在list更新后执行逻辑（比如打印、后续处理），可以通过useEffect监听list的变化，当list更新时自动触发回调：

import React,{ useState,useEffect } from 'react'
import './App.css'

const App = () => {
  const [item, setItems] = useState('');
  const [list, setList] = useState([]);

  // 监听list变化，状态更新后执行逻辑
  useEffect(() => {
    console.log('更新后的list:', list);
  }, [list]); // 依赖项设为list，仅当list变化时触发

  const handleChange = (e) =>{
    setItems(e.target.value)
  }

  const addItems = () =>{
    setList((old) => {
      return [...old,item]
    });
    setItems('');
  }
  return (
    <div>
      <h1>todo</h1>
      <input onChange={(e) => handleChange(e)} value={item} />
      <button onClick={() => addItems()}>Add</button>
    </div>
  )
}

export default App

方法2：在addItems中手动构建新数组，直接使用新值

如果需要在addItems函数内立刻使用更新后的list，可以先手动创建新数组，之后基于这个新数组操作：

const addItems = () =>{
  const newList = [...list, item];
  setList(newList);
  setItems('');
  console.log('更新后的list:', newList); // 直接打印刚创建的新数组
}

这种方式不需要依赖useEffect，直接在更新状态前拿到最新数据，适合需要在当前函数内立刻使用新值的场景。

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