React 将一个状态数组推入另一个答案

【问题标题】：React Push One State Array into AnotherReact 将一个状态数组推入另一个
【发布时间】：2019-05-10 00:31:45
【问题描述】：

本质上，我有这个工作，我正在构建一个游戏组件以允许用户选择他们想要购买的物品，他们被推送到一个待处理的数组中，然后当他们想要结账时，我正在推送这些对象待处理的数组放入购买的数组中。

但是在那之后发生了一些非常奇怪的事情，数组看起来工作正常，挂起的数组是空的，并且购买的数组中有正确的项目。一旦我尝试单击要放入待处理数组中的新项目，如果它与购买的数组中的相同项目会改变那里的计数器，就会出现问题。

我一直在尝试不同的方法来尝试解决此问题，但如果不重新设置状态，我不知道它如何影响购买的阵列。

这是我迄今为止运行此供应商功能的代码。

handleMerchantEquipment(item) {
    let pending = this.state.merchantPending;
    let found = Equipment.find(el => item === el.Name);
    let check = pending.find(el => el.Name === found.Name);
    if (!check) {
        pending.push(found);
    }
    else {
        var foundIndex = pending.findIndex(el => el.Name === check.Name);
        check.Count +=1;
        pending[foundIndex] = check;

    }
    let CP = [0];
    let SP = [0];
    let GP = [0];
    let PP = [0];
    pending.map(item => {
        let cost = item.Cost * item.Count;
        if (item.Currency === "CP") {
            CP.push(cost);
        }
        else if (item.Currency === "SP") {
            SP.push(cost);
        }
        else if (item.Currency === "GP") {
            GP.push(cost);
        }
        else if (item.Currency === "PP") {
            PP.push(cost);
        }
    });

let purchased = [];
        this.state.merchantPending.map(item => {
            purchased.push(item)
        });
this.setState({
            yourCP: totalCP,
            yourSP: totalSP,
            yourEP: totalEP,
            yourGP: totalGP,
            yourPP: totalPP,
            purchased: purchased,
            merchantPending: [],

        });

其中一些代码与他工作正常的货币兑换有关。

我也尝试过 ... 来更新数组，但问题仍然存在，因为它更新了购买状态下的 Count。

【问题讨论】：

标签： arrays reactjs object state setstate

【解决方案1】：

你正在改变状态。你应该不在 React 中改变状态。在 React 中，您应该始终不变地更改状态。

我认为问题出在这一行。

let pending = this.state.merchantPending;

改成

let pending = [...this.state.merchantPending.map(obj => ({...obj}))];

另外，如果要迭代数组，请使用 forEach 而不是 map。 map 返回一个新数组。

pending.forEach(item => {
  ...
}

【讨论】：

我尝试将挂起更改为您所说的尝试方式，甚至将其更改为 forEach 而不是 .map 但它仍在更改两个数组的计数。我不太确定的部分是将对象从一个数组移动到另一个数组的最佳方法，我应该这样做吗？
这是因为浅拷贝数组条目。我已将深层复制的答案更新到一级。它现在应该适合你了。
成功了！非常感谢，我真的没有办法处理这个问题了。

【解决方案2】：

您希望购买的Array 在遇到重复的条目或项目时执行什么操作？你可以在你的问题中澄清这一点吗？

如果您希望它不允许重复项，您必须首先检查数组以查看它是否包含该项。伪代码

if(contains) {
 render alert
 //or do something else
} else {
 purchased.push(item)
}

我无法发表评论，所以当你澄清后我会删除它。

【讨论】：

我已经有了那个设置，这就是第一个函数中检查变量的用途。