如何用数组填充React状态？调用set方法后状态仍为空

你遇到的问题是React状态更新的异步特性导致的：调用setLettersList后，状态不会立即同步更新，所以紧接着的console.log(lettersList)打印的是更新前的旧状态（初始空值）。React会批量处理状态更新以优化性能，状态变更会在后续的渲染周期中生效。

验证与解决方法： #

1. 直接使用临时变量：
   如果你只是想确认处理后的字母数组内容，直接打印wordLetters即可，它已经是你需要的最终值，没必要依赖状态：

   setLettersList(wordLetters);
   console.log('wordLetters', wordLetters); // 这里能拿到正确值
   // 不要直接打印lettersList，此时它还没更新
   

2. 用useEffect监听状态变化：
   如果你需要在lettersList状态更新后执行操作（比如打印或后续逻辑），可以使用useEffect监听该状态：

   import { useEffect } from 'react';
   
   // 在组件内部添加
   useEffect(() => {
     if (lettersList.length > 0) {
       console.log('更新后的lettersList:', lettersList);
     }
   }, [lettersList]); // 依赖数组：当lettersList变化时触发
   

3. 确认状态是否真的未更新：
   你可以在组件的渲染代码中打印lettersList，比如：

   return (
     <div>
       {/* 渲染时查看状态 */}
       <p>Letters List: {JSON.stringify(lettersList)}</p>
     </div>
   )
   

   这会在状态更新后重新渲染，显示最新的lettersList值。

补充说明： #

你的startGame函数中状态更新的逻辑本身是正确的，setLettersList(wordLetters)确实会把处理后的数组存入状态，只是同步代码中无法立即获取到更新后的状态值。

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