说明

Question

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;
}

这是代码。问题是属性数量增加时，redux认为状态没有变化，因此mapStateToProps无法运行。请问有什么解决办法吗？

Answer 1

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

const increaseItem = (array = [], dish) => {
    return array.filter(//your code here);
    //return array;
}

// OR

const increaseItem = (array = [], dish) => {
    const newArray = array.filter(//your code here);
    return newArray;
}

但是，这并没有按照您的想法进行。您应该改用map

const increaseItem = (array = [], dish) => {
    return array.map((item) => {
        if (item.id === dish.id) {
            item.quantity++;
        }
        return item; // Add this
    });
}

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

map将为数组的每个索引返回回调的值。因此，如果您如上所示在最后返回每个项目，则给定的回调应该执行预期的操作。

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

const increaseItem = (array = [], dish) => {
    return array.map((item) => {
      let item = {...item}; // Add this
        if (item.id === dish.id) {
            item.quantity++;
        }
        return item;
    });
}

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

说明

它比答案更长，但我想弄清楚。

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

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

let obj1 = {a: 'b'};

obj1包含对我们创建的新对象的引用，可以说该引用为<1>。现在让我们复制对象。

let obj1 = {a: 'b'};
let obj2 = obj1;

console.log(obj1);
console.log(obj2);

由于变量包含引用，因此实际分配的obj2与<1>相同。

obj1 
// reference: <1>
// value: {a: 'b'}

obj2
// reference: <1>
// value: {a: 'b'}

误解之所以出现在这里，是因为人们认为obj2现在是其自己的原始副本。但是正如您所看到的，它们引用内存中的同一对象。结果是，现在执行obj2.a = 'c'之类的操作会导致obj1.a也等于'c'。

运行下面的代码片段以供自己查看：

let obj1 = {a: 'b'};
let obj2 = obj1;

obj2.a = 'c';

console.log(obj1);
console.log(obj2);

我们如何避免制作误导性副本？

最简单的方法是创建一个全新的对象，并通过使用spread syntax用旧对象的值填充它。

let obj1 = {a: 'b'};
let obj2 = {...obj1};

// obj1 
// reference: <1>
// value: {a: 'b'}

// obj2
// reference: <2>
// value: {a: 'b'}

obj2.a = 'c';

console.log(obj1);
console.log(obj2);

现在您可以看到我们已经复制了一个对象，但是每个对象都在内存中引用了自己的对象。这几乎总是我们想要的行为。

引入嵌套时，事情变得更加混乱。但是，如果您了解基本概念，它应该更有意义。

let obj1 = {
  foo: 'bar',
  nested: {a: 'b'}
};

// obj1 
// reference: <1>
// value: {foo: 'bar', nested: <2>}

// nested
// reference: <2>
// value: {a: 'b'}

嵌套对象也获得自己的引用。因此，当我们分解以创建新对象时，这就是我们正在做的事情。

let obj2 = {...obj1};

obj1 
// reference: <1>
// value: {foo: 'bar', nested: <2>}

nested
// reference: <2>
// value: {a: 'b'}

obj2
// reference: <3>
// value: {foo: 'bar', nested: <2>}

obj2引用了内存中的新位置，但是嵌套对象仍然具有与以前相同的引用！

因此，即使我们在顶部创建了一个新对象，如果我们修改嵌套属性，我们的行为也会与以前类似。这称为“浅拷贝”。试试看：

let obj1 = {
  foo: 'bar',
  nested: {a: 'b'}
};

let obj2 = {...obj1};

obj2.nested.a = 'c';

console.log(obj1);
console.log(obj2);

解决方案：也创建具有所有嵌套值的新对象。

let obj2 = {...obj1, nested: {...obj1.nested}};

现在，我们已经成功创建了嵌套对象的完全独立副本。

obj1 
// reference: <1>
// value: {foo: 'bar', nested: <2>}

nested
// reference: <2>
// value: {a: 'b'}

obj2
// reference: <3>
// value: {foo: 'bar', nested: <4>}

nested
// reference: <4>
// value: {a: 'b'}

您可以放心obj2及其嵌套值来编辑obj1及其嵌套值。

let obj1 = {foo: 'bar', nested: {a: 'b'}};
let obj2 = {...obj1, nested: {...obj1.nested}};

obj2.nested.a = 'c';

console.log(obj1);
console.log(obj2);

发生Redux状态更改时，组件不会更新

1 个答案:

说明