你可以使用useEffectHooks在更新状态值后获取更新的状态。并从addItems函数中删除列表控制台日志。

useEffect(() => {
  console.log(list);
}, [list]);

setList((old) => {
  console.log([...old,item]);
  return [...old,item]
});

即使您添加延迟，更新也不会立即反映。下面的示例为useState引入了一个下降时间延迟，以完成异步操作。我们仍然看到旧的国家价值。因为状态变量仍然属于旧闭包。

const delay = (ms) => new Promise(res => setTimeout(res, ms));
  
  const addItems = async () =>{
    setList((old) => {
      return [...old,item]
    });
    setItems('');
    await delay(1000)
    console.log(list);
  }

推荐的解决方案是使用useEffect钩子来反映任何状态更改

useEffect(() => {
    console.log(list)
}, [list])

状态的改变将仅在下一个render()中可见。如果你想立即改变，你可以使用useRef();。useRef类似于useState，但不会立即触发重新呈现和更改。

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

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

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

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

export default App