arrays - 使用字典设置状态在 REACT 中不起作用
问题描述
我目前正在学习 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]' 或任何数组,它就可以工作。
解决方案
您正在使用数组,[]
而不是字典的对象。请改用常规对象。
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",
};
componentDidMount() {
this.startGame();
}
saveStateToStorage() {
localStorage.setItem("gameState", JSON.stringify(this.state));
}
startGame = () => {
//Démarre la partie
var turns = this.createTurnListFromSelectedCharacters();
console.log("foo", 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];
console.log( char.uniqueKey );
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() {
const { turnList } = this.state;
return (
<div>{
Object.keys(turnList).map( key => (
<div key={turnList[ key ].charKey}>
<p>Charkey: {turnList[ key ].charKey}</p>
<p>Alive: {turnList[ key ].alive}</p>
</div>
))
}</div>
);
}
}
ReactDOM.render(<Game />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
推荐阅读
- dart - 如果手势超出 Flutter 中的容器界限,如何取消手势
- python - 具有不规则采样率的傅立叶变换
- linux - 运行“make”时在wireshark中发生错误
- angular - 我们如何从 Helper 类获得对组件的响应并在 Angular 7 中与 HTML 绑定?
- javascript - JQuery JS - 如何捕获重定向并更改重定向 url?
- ios - 在objective-C的dispatch_async中传递参数时的EXC_BAD_ACCESS
- c++ - 从语法创建 AST
- c# - 如何统一更改加载的文件名?
- asp.net - 在同一端口 iis 上运行多个应用程序的需求是什么
- angular - 整个项目中所有数字的千位角分隔符