React填充数组后更新State仍为空的问题求助

你猜的没错，就是React useState的异步特性导致的问题。React会批量处理状态更新，调用setgame之后，当前函数作用域里的game还是更新前的旧值，自然打印不到新的arr。另外你代码里还有个笔误：console.log(game.array)应该是console.log(game.arr)，这也是你看到空值的原因之一。

下面是几种解决方法：

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

如果要在状态更新后执行逻辑（比如打印最新值），可以用useEffect监听game.arr，当它变化时触发：

const [game, setgame] = useState({ row: 6, column: 6, w: 100, x: '', y: '', arr: [], placedWordsX: [], boardArray: [] })
const grid=16;

useEffect(() => {
    start();
}, [])

// 监听arr的变化，更新后执行
useEffect(() => {
    console.log('最新的arr:', game.arr);
}, [game.arr])

function start() {
    let newGameArr = []
    for (let i = 0; i < grid; i++) {
            newGameArr[i] = "-";
    }
    setgame({...game, arr:newGameArr})      
}

方法2：直接使用新创建的数组 #

如果你只是想在setgame后查看数组内容，没必要通过state取值，直接用你创建的newGameArr就行：

function start() {
    let newGameArr = []
    for (let i = 0; i < grid; i++) {
            newGameArr[i] = "-";
    }
    setgame({...game, arr:newGameArr})      
    console.log('新数组:', newGameArr); // 直接打印这个变量
}

方法3：使用函数式更新（适合依赖旧状态的场景） #

如果你的新状态依赖于旧状态的其他值，更安全的方式是用函数式更新，避免闭包导致的旧值问题：

function start() {
    let newGameArr = []
    for (let i = 0; i < grid; i++) {
            newGameArr[i] = "-";
    }
    // 用函数接收旧状态，返回新状态
    setgame(prevGame => ({...prevGame, arr:newGameArr}))      
}

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