如何用数组填充状态

Question

我试图使用set方法在状态中添加列表，但我的状态仍然为空

App.js

// Starts the screts word game
const startGame = () => {
// pick word and pick category
const { word, category } = pickWordAndCategory();
// create array of letters
let wordLetters = word.split("");
wordLetters = wordLetters.map((l) => l.toLowerCase());
// Fill states
setPickedCategory(category);
setPickedWord(word);
setLettersList(wordLetters);
console.log('wordLetters', wordLetters);
console.log('lettersList', lettersList);

setGameState(stages[1].name);
};
const pickWordAndCategory = () => {
// pick a random category
const categories = Object.keys(words);
const category = categories[Math.floor(Math.random() * Object.keys(categories).length)];
console.log('category', category);
// pick a random word
const word = words[category][Math.floor(Math.random() * words[category].length)]
console.log(word);
return { word, category };
}

这是浏览器日志

查看日志时，我们发现状态为空

Answer 1

当您使用setLettersList(...)时，您实际上并没有改变lettersList变量本身。注意当你声明它的时候，const [lettersList, setLettersList] = useState([]);letterList实际上是常数，所以这个变量甚至不能被改变。相反，它告诉React重新运行函数组件，这次给lettersList一个新值。因此，对于更新的值，它只会在再次运行整个函数时再次运行const [lettersList, setLettersList] = useState([]);时出现。

如果你想监控lettersList的变化，你可以这样做:

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

这将在每次更新时打印lettersList。

Answer 2

状态更新是异步的，所以当你设置一个新的状态值和console.log()之后，它将显示之前的值，因为状态还没有更新。

这就是为什么你的lettersList值在控制台显示状态的旧值(空数组)。