Question

从本质上讲，我正在工作，我正在构建一个游戏组件，以允许用户选择要购买的物品，将他们压入待处理的阵列中，然后当他们希望结帐时，我将这些物品从将待处理的阵列放入购买的阵列中。

但是在那之后发生了非常奇怪的事情，这些数组看起来像在正常工作，待处理的数组为空，并且购买的数组中包含正确的项。问题是，一旦我尝试单击一个新项目以将其放入待处理阵列中（如果该项目与购买的阵列中的项目相同），就会更改该计数器。

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

到目前为止，这是我用于操作此供应商功能的代码。

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。

Answer 1

您正在变异状态。您不应该在React中不突变状态。您应该始终在React中一成不变地更改状态。

我认为问题出在这一行。

let pending = this.state.merchantPending;

将其更改为

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

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

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

Answer 2

当purchasedArray遇到重复的条目或项目时，您要做什么？您能否在问题中澄清这一点？

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

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

我无法发表评论，因此您澄清后会删除它。

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

2 个答案: