在 React 中使用 Object.keys 访问嵌套对象

Question

我正在尝试使用 React 创建一个简单的游戏，我对它还很陌生。击败怪物后，我想掠夺它的库存。我正在使用 Object.keys 来循环播放器的库存并向其中添加项目或增加数量。

1.How 我达到了 apple.amount 吗？（增加它）。我尝试了 updatedPlayer.inventory[key[item]]，其中 key[item] 应该类似于 food[apple] 但它是未定义的。编辑：inventory[key][item] 解决问题，谢谢。

2.I 得到了一个有点长的循环，它增加了玩家和怪物库存中的物品数量。 我如何添加新的物品到玩家的物品栏中？ 就像 'spear' 在怪物的 inv 中但不在玩家的 inv 中。我的目标是做这样的事情：updatedPlayer.inventory[food].push(spear)。 我将 'broken' 行标记为//这是问题所在 编辑：我猜 updatedPlayer.inventory[key][${monsterItem}] = monster.inventory[monsterItem] 解决了问题。

感谢所有感兴趣的人。

这是循环：

 lootMonster = () => {
    console.log('how many times?');
    var updatedPlayer;
  // select currently isSelected player, not very important for now
  Object.keys(this.props.player).map(key => {
     if(this.props.player[key].isSelected){
       updatedPlayer = this.props.player[key];
     }
  })
  console.log('i am updated player:', updatedPlayer);
  var monster = this.props.monster;
 

  Object.keys(monster.inventory).map(item => {
    console.log('monster.inventory', monster.inventory);
  })

  if(updatedPlayer!=null) {
  Object.keys(monster.inventory).map(monsterItem => //loop monster's items 
    {  
      var alreadyAdded = false;
      Object.keys(updatedPlayer.inventory).map(key => //loop inventory, gets food, weapons, others
      {  
        Object.keys(updatedPlayer.inventory[key]).map(item => //loop food, weapons, others, gets apple, orange, sword, nail, axe 
        { 
          if(item == monsterItem) //apple from monster == apple from in player's inv?
          {
            console.log('this item is in both inventories, i increase the amount:',item)
            alreadyAdded=true;
            //increasing amount of an item
            updatedPlayer.inventory[key][item].amount =  updatedPlayer.inventory[key][item].amount + monster.inventory[monsterItem].amount; 
          }
        })
        //im still in first player's loop, looping categories like food, weapons 
        if(!alreadyAdded) //i got here that means im new to players inventory
        { 
          if(monster.inventory[monsterItem].type==key) //orange.type==food, weapon, others?
          {   
              console.log('i got here, that means im a new item in the inventory and i need to be added to category based item.type');
              console.log('i push this item:',monsterItem,'to category:',key ,'becouse its type is:',monster.inventory[monsterItem].type );
              console.log('updatedPlayer.inventory[key]',updatedPlayer.inventory[key]);
              console.log('monster.inventory[monsterItem]',monster.inventory[monsterItem]);
              // here is the problem - spear only exists in monster inv, how do i push item like playerInventory[weapons].push[spear]
              updatedPlayer.inventory[key].push(monsterItem)
          }
        }
      })
    })
     console.log('updated inv',updatedPlayer.inventory)
  }
}

我的数据库是这样的：

const players = {
  geralt: {
      name: "geralt",
      image: "/images/geralt.jpg",
      desc:
        "I am the desc.",
      gold: 3200,
      isSelected:false,
      inventory: 
      {
        food: {
              apple:  {
                  desc:"jusy",
                  hpToRestore: 20,
                  amount: 1
                      },
              orange: {
                  desc:"lovely",
                  amount: 2
                      },
              },
        weapons: {
              sword:{
                 att:9,
                 speed:100,
                 amount: 3
                     },
              axe:   {
                att:12,
                speed:100,
                amount: 4
                     }
                },
        other: {
              nail:   {
                desc:"rusty",
                amount: 1
                      }
               }   
      },
      stats: 
      {
        hp: 999,
        att: 39  
      },
  }

怪物：

const monsters = {
    bat: {
            name: "bat",
            image: "/images/bat.png",
            desc:
              "I am bat desc.",
            gold: 3200,
            inventory: 
            {
            pineapple: {
                desc:"even more jusy",
                amount: 5,
                type: "food"
                   },
            nail:  {
                    desc:"rusty",
                    amount: 1,
                    type: "other"
                   },
            spear: {
                    desc:"spear desc",
                    amount: 1,
                    type:"weapons"
                   }
            },
            stats: 
            {
              hp: 4,
              att: 13  
            },
          }
}

code

Answer 1

您指向的行应该是

console.log('item',updatedPlayer.inventory[key][item]);

按照您编写的方式，item 正在索引到 key，这类似于 updatedPlayer.inventory["food"["apple"]]，这当然是未定义的。与你真正想要的相比updatedPlayer.inventory["food"]["apple"].amount

在 React 中使用 Object.keys 访问嵌套对象

Reaching nested objects with Object.keys in React

nested-loops

reactjs