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() {...}
}

类游戏扩展React.Component{
状态={
所选字符：[{“name”：“Loup Garou”，“imgName”：“base_Loup.png”，“uniqueKey”：“Loup”，“playerName”：“}，{“uniqueKey”：“voyante”，“imgName”：“base_voyante.png”，“name”：“voyante”，“maxInGame”：1，“left”：1}，
名单：[]，
游戏状态：“角色选择”，
};
saveStateToStorage（）{
setItem（“gameState”，JSON.stringify（this.state））；
}
StartName=（）=>{
//巴黎德马尔酒店
var turns=this.createTurnListFromSelectedCharacters（）；
控制台。日志（转）；
这是我的国家({
轮换名单：轮换，
gameStatus:“gameStarted”，
},
() => {
//Sauvegarde l'tat du jeu dans le本地仓库
这个.saveStateToStorage（）；
console.log（this.state.turnList）；
}
);
};
createTurnListFromSelectedCharacters=（）=>{
//旅游业的竞争优势
风险值=[]；
对于（变量i=0；i

第一个console.log显示由我的函数createTurnListFromSelectedCharacters正确生成的字典，setState回调中的第二个console.log不显示任何内容。

---

如果我在setState中放入类似“turnList:[1,2,3,4,5]”的内容或任何数组，则它正在工作。

您需要在构造函数方法中设置状态，例如：

class Game extends React.Component {
  constructor(props){
    super(props);
    this.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",
    };
  }
  ...
}

---

您正在使用数组

[]

，而不是字典的对象。改为使用常规对象

类游戏扩展React.Component{
状态={
所选字符：[{“name”：“Loup Garou”，“imgName”：“base_Loup.png”，“uniqueKey”：“Loup”，“playerName”：“}，{“uniqueKey”：“voyante”，“imgName”：“base_voyante.png”，“name”：“voyante”，“maxInGame”：1，“left”：1}，
名单：{}，
游戏状态：“角色选择”，
};
componentDidMount（）{
这个；
}
saveStateToStorage（）{
setItem（“gameState”，JSON.stringify（this.state））；
}
StartName=（）=>{
//巴黎德马尔酒店
var turns=this.createTurnListFromSelectedCharacters（）；
console.log（“foo”，turns）；
这是我的国家({
轮换名单：轮换，
gameStatus:“gameStarted”，
},
() => {
//Sauvegarde l'tat du jeu dans le本地仓库
这个.saveStateToStorage（）；
console.log（this.state.turnList）；
}
);
};
createTurnListFromSelectedCharacters=（）=>{
//旅游业的竞争优势
var={}；
对于（变量i=0；i(
Charkey:{交清单[key].Charkey}

活动：{turnList[key].Alive}

))
}
);
}
}
render（，document.getElementById（“根”））
如果我把devserkan的答案和我在另一个主题上找到的东西结合起来。
我明白了：

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",
  };
  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() {
    return (
      <div>
        {Object.keys(props.aliveCount).map((turn, i) => {
          return (
            <div>
              <img alt={props.aliveCount[turn].imgName} src= {require("../../public/images/" + props.aliveCount[turn].imgName)} />
              {props.aliveCount[turn].alive}/{props.aliveCount[turn].inGame}
            </div>
          );
        })}
      </div>
    );
  }
}

类游戏扩展React.Component{
状态={
所选字符：[{“name”：“Loup Garou”，“imgName”：“base_Loup.png”，“uniqueKey”：“Loup”，“playerName”：“}，{“uniqueKey”：“voyante”，“imgName”：“base_voyante.png”，“name”：“voyante”，“maxInGame”：1，“left”：1}，
名单：{}，
游戏状态：“角色选择”，
};
StartName=（）=>{
//巴黎德马尔酒店
var turns=this.createTurnListFromSelectedCharacters（）；
console.log（“foo”，turns）；
这是我的国家({
轮换名单：轮换，
gameStatus:“gameStarted”，
},
() => {
//Sauvegarde l'tat du jeu dans le本地仓库
这个.saveStateToStorage（）；
console.log（this.state.turnList）；
}
);
};
createTurnListFromSelectedCharacters=（）=>{
//旅游业的竞争优势
var={}；
对于（变量i=0；i