Question

所以我试图将一个对象分配给一个对象属性。我找到了轻微的成功，但是对象分配不正确。我在数组上映射以显示卡。

有大牌和小牌。大卡可以分配有预定数量和类型的小卡。牌组中可以有多个相同的大牌。大牌存储在一个数组中

我的大牌具有对象属性：

upgrades: {
  preterminedSmallCard: null,
  preterminedSmallCard: null
}

在单击时，我试图根据阵列中每个大卡的唯一ID将小卡添加到插槽中。

不是将其添加到阵列中的单个实例，而是将其添加到具有相同名称的每个大卡中。如果名称不同，则不会添加。

这是我的代码中带有注释的地方：

addUpgradeHandler = (card) => {
    //determines which upgrade type to add - console.logging properly
    const upgradeType = this.props.match.params.type;

    //finding the index of targeted ship
    const shipIndex = this.props.shipInfo.findIndex(index => {
        /** 
        * Router passes the id of the targeted ship, the compared against
        * returns true to the targeted ship, false for the ones not targeted
        * ID's generated with npm package uniqID - unique id for each instance in array
        **/
        return (index.id === this.props.match.params.id);
    });

    console.log(shipIndex); //evaluates properly to the target index position

    //mapping the state to a copy
    const newShips = [...this.props.shipInfo];

    //targeting the upgrades property inside of the correct index pos
    const upgrades = newShips[shipIndex].upgrades;

    console.log(upgrades); //returns only one index pos of the state with the upgrade equipped

    const currentPoints = this.props.points;

    //checking if adding the card will bust the max points allowed
    if (currentPoints + card.points < 400) {

        console.log(upgrades[upgradeType]); // returns one object, the value stored in the proper place
        /**
         * Issue starts here
         * - card -> represents object that the map below is, issue persists if object is explicitly written
         * assigns upgrade card object to the correct property type, but for every ship with the same name
         * The name of the ship is not being evaluated anywhere in this function
         **/
        //not intended

        upgrades[upgradeType] = card;
    }      
}

其他奇怪的事情：

我使用与上面相同的比较，通过拼接从阵列中删除了大牌，并且只以期望的方式拼接了一张大牌。
从数组中拼接后，如果我添加了一个同名的大卡，则使用uniqId()

所以TL; DR，我针对特定索引的技术是正确地控制台记录日志，但是对象的名称分配不正确，这在我的代码中根本没有评估。

React事件方法将对象分配给太多属性

0 个答案: