React中useState数组首次更新后日志显示为空的问题求助

首先明确：这跟spread运算符完全没关系，问题出在React的useState状态更新是异步的特性上。

你调用setLiveRows之后，React并不会立刻更新liveRows的值，它会把这次更新放进队列，等合适的时机再批量处理状态更新。所以你紧接着的console.log(liveRows)拿到的还是更新前的旧值，而页面渲染会等到状态真正更新后再执行，所以能看到正确结果。

解决方法1：用useEffect监听状态变化来打印 #

如果需要在状态更新后查看最新值，可以通过useEffect监听liveRows，一旦状态变化就触发打印：

const [liveRows, setLiveRows] = useState([]);

function addRow(arr){
    setLiveRows([...liveRows, arr]);
}

useEffect(() => {
    console.log(liveRows);
}, [liveRows]); // 只有liveRows变化时才执行

解决方法2：使用函数式更新（更稳妥的状态更新方式） #

如果你的新状态依赖于旧状态，推荐用函数式更新的写法，这样能确保拿到的是最新的旧状态，避免因为异步更新导致的状态不一致：

const [liveRows, setLiveRows] = useState([]);

function addRow(arr){
    // 这里的prevLiveRows就是当前最新的旧状态
    setLiveRows(prevLiveRows => [...prevLiveRows, arr]);
}

这种写法不管状态更新是不是异步，都能保证基于最新的状态来生成新数组，后续如果需要在更新后做其他依赖新状态的操作，也更可靠。

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