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

Question

本质上，我有这个工作，我正在构建一个游戏组件，允许用户 select 他们想要购买的物品，他们被推入待定数组，然后当他们想结帐时我正在将这些对象从 pending 数组推送到 purchased 数组。

但之后发生了一些非常奇怪的事情，数组看起来工作正常，待定数组为空，而购买的数组中包含正确的项目。一旦我尝试单击一个新项目以将其放入待定数组中，如果它与已购买数组中的相同项目改变了那里的计数器，问题就来了。

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

到目前为止，这是我运行此供应商功能的代码。

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: [],

        });

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

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

Answer 1

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

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

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

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

Answer 2

你正在改变状态。你应该 而不是 在 React 中改变状态。在 React 中你应该总是不可变地改变状态。

我认为问题出在这一行。

let pending = this.state.merchantPending;

改为

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

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

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

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

React Push One State Array into Another

arrays

state

object

setstate

reactjs