Javascript 组件赢得'；t在redux状态发生更改时更新

这是代码。 问题是当属性数量增加时，redux认为状态没有变化，所以MapStateTops不会运行。 请问有什么解决方案吗？

数组返回一个新数组，它不会更新原始数组。直接返回或保存到变量以进行更改

const increaseItem=（数组=[]，碟形）=>{
返回array.filter（//此处的代码）；
//返回数组；
}
//或
常量递增项=（数组=[]，碟形）=>{
const newArray=array.filter（//此处的代码）；
返回新数组；
}

然而，这并不是你所认为的那样。您应该改用

map

const increaseItem=（数组=[]，碟形）=>{
返回数组.map（（项）=>{
如果（item.id==dish.id）{
项目.数量++；
}
return item；//添加这个
});
}

仅当回调函数返回true时，才会从数组返回值。您的函数没有检查是否应该过滤，而是尝试修改值（并且是）

将返回数组的每个索引的回调值。因此，如果您在如上所示的末尾返回每个项，那么您给定的回调应该会执行您期望的操作

最后一个问题是确保您不会改变状态这很可能是问题的根源

const increaseItem=（数组=[]，碟形）=>{
返回数组.map（（项）=>{
让item={…item}；//添加此
如果（item.id==dish.id）{
项目.数量++；
}
退货项目；
});
}

使用

map

和

filter

，您将创建一个新的状态数组但是，在执行

项时。数量++，您将在原始状态和新状态下变异嵌套对象，因为嵌套对象仍使用相同的引用。在映射时创建一个新对象不仅可以确保主状态数组是新的，还可以确保任何嵌套对象也是新的（此特定示例仅保护1个深度）

解释
这比答案长，但我想说清楚

您遇到的问题是一个非常常见的问题，它与JavaScript如何处理非基本数据类型有关。创建数组或对象并将其指定给变量时，该变量实际上并不包含该对象，而是包含指向该对象的引用或指针。对象本身实际上存储在内存中的其他位置

为了清楚起见，让我们用
包围的数字来表示引用。
让我们创建一个对象：

case 'ADD_TO_CART': {
    let item = action.payload;
    let newState = addToCart(state, item);
    return newState;
}
const increaseItem = (array = [], dish) => {
    array.filter((item) => {
        if (item.id === dish.id) {
            item.quantity++;
        }
    });
    return array;
}

case 'INCREASE_ITEM': {
    let item = action.payload;
    console.log('run in increase')
    let newState = increaseItem(state, item);
    return newState;
}

obj1
保存对我们创建的新对象的引用，假设引用为。现在让我们制作对象的副本


让obj1={a:'b'}；
设obj2=obj1；
控制台日志（obj1）；
console.log（obj2）数组返回一个新数组，它不会更新原始数组。直接返回或保存到变量以进行更改

const increaseItem=（数组=[]，碟形）=>{
返回array.filter（//此处的代码）；
//返回数组；
}
//或
常量递增项=（数组=[]，碟形）=>{
const newArray=array.filter（//此处的代码）；
返回新数组；
}

然而，这并不是你所认为的那样。您应该改用
map

const increaseItem=（数组=[]，碟形）=>{
返回数组.map（（项）=>{
如果（item.id==dish.id）{
项目.数量++；
}
return item；//添加这个
});
}

仅当回调函数返回true时，才会从数组返回值。您的函数没有检查是否应该过滤，而是尝试修改值（并且是）

将返回数组的每个索引的回调值。因此，如果您在如上所示的末尾返回每个项，那么您给定的回调应该会执行您期望的操作

最后一个问题是确保您不会改变状态这很可能是问题的根源

const increaseItem=（数组=[]，碟形）=>{
返回数组.map（（项）=>{
让item={…item}；//添加此
如果（item.id==dish.id）{
项目.数量++；
}
退货项目；
});
}

使用
map
和
filter
，您将创建一个新的状态数组但是，在执行
项时。数量++，您将在原始状态和新状态下变异嵌套对象，因为嵌套对象仍使用相同的引用。在映射时创建一个新对象不仅可以确保主状态数组是新的，还可以确保任何嵌套对象也是新的（此特定示例仅保护1个深度）

解释
这比答案长，但我想说清楚

您遇到的问题是一个非常常见的问题，它与JavaScript如何处理非基本数据类型有关。创建数组或对象并将其指定给变量时，该变量实际上并不包含该对象，而是包含指向该对象的引用或指针。对象本身实际上存储在内存中的其他位置

为了清楚起见，让我们用
包围的数字来表示引用。
让我们创建一个对象：

case 'ADD_TO_CART': {
    let item = action.payload;
    let newState = addToCart(state, item);
    return newState;
}
const increaseItem = (array = [], dish) => {
    array.filter((item) => {
        if (item.id === dish.id) {
            item.quantity++;
        }
    });
    return array;
}

case 'INCREASE_ITEM': {
    let item = action.payload;
    console.log('run in increase')
    let newState = increaseItem(state, item);
    return newState;
}

obj1
保存对我们创建的新对象的引用，假设引用为。现在让我们制作对象的副本


让obj1={a:'b'}；
设obj2=obj1；
控制台日志（obj1）；
console.log（obj2）谢谢，这很清楚，希望下次能见到你。但我不明白，array.filter返回一个新数组，而不是更新原始数组，但为什么项目.quantity++在旧数组中真的增加了？我要更新我的答案，因为我的解释太长了，无法发表评论。谢谢，这很清楚，希望下次能见到你。但是我不明白，array.filter返回一个新的数组，而不是更新原始数组，但是为什么item.quantity++在ol中真的增加了