使用 useReducer 更新状态时遇到问题

Question

利用 React useReducer 并尝试进行状态更新并在我进行更改时重新渲染。

JSX 调用减速器：

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

和 useReducer：

const reducer = (state, action) => {
  const { item, type } = action;
  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;
    }
  }
};

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

Answer 1

由于您返回了相同的对象，因此您的减速器无法检测到状态变化。通过比较 prev state value 和 new state 来检测变化，通过===比较或Object.is()比较基本上是一样的东西（不确定是哪一个，可以尝试在 React docs 中找到）。

所以而不是：

const newCart = state;

你需要做：

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