Reactjs 使用useReducer更新状态时出现问题

利用React useReducer并尝试执行状态更新，并在我进行更改时让React重新呈现

JSX调用减速器：

<button onClick={() => dispatch({ type: "DECREMENT", item })} >+</button>

完整的代码可以在下面找到

---

由于返回了相同的对象，因此还原程序无法检测到状态更改。通过比较上一个状态值和新的状态值，通过===比较或基本相同的比较（不确定哪一个）来检测更改，可以尝试在React文档中查找

因此，不是：

const newCart = state;

您需要执行以下操作：

// shallowly copy the state so now Object.is(newState, prevState) returns false
const newCart = [...state];
...
return newCart

您正在将newCart设置为状态，该状态指向同一事物。 要么克隆状态，要么返回新的对象实例

switch (type) {
    case "INCREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity + 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("INCREMENT", newCart);

      return [...newCart];
    }
    case "DECREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity - 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("DECREMENT", newCart);
      return [...newCart];
    }
    case "REMOVE": {
      return state.filter(eachitem => item.id !== eachitem.id);
    }
    default: {
      return state;
    }
  }
};

更新的沙盒

---

这看起来比返回新对象更有意义。我创建NewCart是为了避免变异，但因为它是一个对象，所以它指向同一个对象，我对它进行了变异。通过将状态扩展到新对象中，它提供了一个浅拷贝并实际引用了一个新对象。谢谢

switch (type) {
    case "INCREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity + 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("INCREMENT", newCart);

      return [...newCart];
    }
    case "DECREMENT": {
      const newCart = state;
      const u = { ...item, quantity: item.quantity - 1 };
      const index = newCart.findIndex(eachitem => item.id === eachitem.id);
      newCart.splice(index, 1, u);
      console.log("DECREMENT", newCart);
      return [...newCart];
    }
    case "REMOVE": {
      return state.filter(eachitem => item.id !== eachitem.id);
    }
    default: {
      return state;
    }
  }
};