Question

我正在学习对redux的反应，但是我正面临着这个问题，

当我调度“删除”操作时

动作

print("Enter your Height:")
a.height = Double( readLine() ?? "" ) ?? 0.0

在switch语句内的reducer中

print("Enter your Height:")
if let inputString = readLine(), let height = Double(inputString) {
    a.height = height
}

我在“删除”按钮上使用它

export const remove = () => ({
    type: REMOVE
})

该操作只是控制台日志，当我单击“删除”按钮时，它记录为“已删除”，然后出现此错误

case REMOVE:
      return console.log("removed");

      break;

我已在我的reducer文件中使用了初始状态

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increase, decrease, remove } from "./../actions";

const CartItem = ({ img, title, price, amount }) => {
  const dispatch = useDispatch();

  const removeItem = () => {
    dispatch(remove());
  };

  return (
    <div className="cart-item">
      <img src={img} alt={title} />
      <div>
        <h4>{title}</h4>
        <h4 className="item-price">${price}</h4>
        {/* remove button */}
        <button className="remove-btn" onClick={removeItem}>
          remove
        </button>
      </div>
      <div>
        {/* increase amount */}
        <button className="amount-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M10.707 7.05L10 6.343 4.343 12l1.414 1.414L10 9.172l4.243 4.242L15.657 12z" />
          </svg>
        </button>
        {/* amount */}
        <p className="amount">{amount}</p>
        {/* decrease amount */}
        <button className="amount-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
          </svg>
        </button>
      </div>
    </div>
  );
};

export default CartItem;

我不知道错误是什么意思。有人可以解释一下并给我看解决方法吗。

Answer 1

此错误是由以下原因造成的：

case REMOVE:
    return console.log("removed");

    break;

当您需要返回状态时，您什么也不返回。因此，在调用remove函数并将状态设置为无（未定义）之后，从状态中选择的函数将抛出错误，因为该状态不再存在。这就是为什么在这里引发错误：

const { cart, total } = useSelector((state) => state);

该错误表明您无法从状态获取属性“购物车”，因为状态未定义。

您需要更改减速器，使其在每次操作后返回有效状态。最终，您实际上想删除一些东西，但是现在可以使用：

case REMOVE:
    console.log("removed");
    return state;

×TypeError：无法解构“ Object（...）（...）”的属性“ xxx”，因为未定义

1 个答案: