我目前正在学习 REACT,但状态仍然存在一些问题。好像我不能用字典设置状态。
class Game extends React.Component {
state = {
selectedCharacters: [{"name":"Loup Garou","imgName":"base_loup.png","uniqueKey":"loup","playerName":""},{"uniqueKey":"voyante","imgName":"base_voyante.png","name":"Voyante","maxInGame":1,"left":1}],
turnList: [],
gameStatus: "characterSelection",
};
saveStateToStorage() {
localStorage.setItem("gameState", JSON.stringify(this.state));
}
startGame = () => {
//Démarre la partie
var turns = this.createTurnListFromSelectedCharacters();
console.log(turns);
this.setState({
turnList: turns,
gameStatus: "gameStarted",
},
() => {
//Sauvegarde l'état du jeu dans le local storage
this.saveStateToStorage();
console.log(this.state.turnList);
}
);
};
createTurnListFromSelectedCharacters = () => {
//Création de la liste des tours ainsi que du compteur de joueur en vie
var turns = [];
for (var i = 0; i < this.state.selectedCharacters.length; i++)
{
var char = this.state.selectedCharacters[i];
var turn = turns[char.uniqueKey];
if (turn === undefined) {
var namesList = [{ name: char.playerName, isAlive: true }];
var newTurn = {
charKey: char.uniqueKey,
alive: 1,
inGame: 1,
names: namesList,
imgName: char.imgName
};
turns[char.uniqueKey] = newTurn;
}
else {
turn.names.push({ name: char.playerName, isAlive: true });
turn.alive = turn.alive + 1;
turn.inGame = turn.inGame + 1;
turns[char.uniqueKey] = turn;
}
}
return turns;
};
render() {...}
}
第一个 console.log 显示由我的函数 createTurnListFromSelectedCharacters 正确生成的字典,而 setState 回调中的第二个 console.log 什么也不显示。如果我在 setState 中放置类似 'turnList: [1,2,3,4,5]' 或任何数组,它就可以工作。