如何在点击事件处理程序中使用 `useSelector()` 的值？

Question

Foll 是代码的大纲。我的“cartSize”已经过时了。

function CartComp(props) {
  const [cartSize, setCartSize] = useState(0);

const cartList = useSelector((state) => state.cart.cartItems);

useEffect(() => {
  setCartSize(() => {
    return cartList.length;
  });
}, [cartList]);

const onClickAddBtn = (cartObj) => {
  if (cartSize > 4) { // outdated state
    alert(`cannot add more than ${cartSize} items`);
  }
}
<button
onClick={onClickAddBtn.bind(this, cartObj)}
>
Add
</button>
}

基本上，在点击 时，需要获取cartSize 以用于逻辑目的。 useSelector() 给出一个数组cartList，其length 设置为setCartSize。 所以，当cartSize 被访问时，它正在赋予价值，落后一步。即点击<button>，cartList 是最新的，但cartSize 是前一个值的值。

如何管理这个？如何在点击事件处理程序中使用useSelector() 的值？

EDIT-1：

// robo-list.js

const cartList = useSelector((state) => state.robo.cartItems);

{galleryItems.map((robo) => {
 <div>
  <CartButton list={cartList} item={robo} />
 </div>
...

// 机器人画廊.js

import { useDispatch } from "react-redux";

import Button from "@mui/material/Button";
import AddShoppingCartIcon from "@mui/icons-material/AddShoppingCart";

import { roboActions } from "../store/robo-slice";

function CartButton(props) {
  console.log("gal2: ",props.list.length);
  const dispatch = useDispatch();

  const onClickAddBtn = (len) => {
    console.log("gal1: ",len);
    if (props.list.length > 2) {
      alert(`cannot add more than ${props.cartList.length} material`);
    } else {
      dispatch(
        roboActions.updateCart({
          item: props.item,
          userAction: "addItemToCart",
        })
      );
    }
  };

  return (
    <Button
      variant="outlined"
      startIcon={<AddShoppingCartIcon fontSize="small" />}
      disabled={props.item.stock === 0}
      onClick={onClickAddBtn}
    >
      Add
    </Button>
  );
}
export default CartButton;

我已删除 bind() 并将 click 代码分离到另一个名为 robots-gallery.js 的文件中。我正在传递 cartList 并单击项目 robo 进入。

仍然cartList.length 落后一步。 我在这里缺少什么？请帮忙。

完整代码在这里https://codesandbox.io/s/trusting-goldberg-gcivk?file=/frontend/src/components/robo-list.js

编辑 2： // 机器人列表.js enter code herem={robo} />

// 机器人画廊.js

function CartButton(props) {
  const cartList = useSelector((state) => state.robo.cartItems);

  console.log("gal2: ",cartList.length); // 
  const dispatch = useDispatch();

  const onClickAddBtn = () => {
    console.log("gal1: ", cartList.length);
    if (cartList && cartList.length > 2) {
      alert(`cannot add more than ${cartList.length} items`);
    } else {
      dispatch(
        roboActions.updateCart({
          item: props.item,
          userAction: "addItemToCart",
        })
      );
    }
  };
  <Button
  variant="outlined"
  startIcon={<AddShoppingCartIcon fontSize="small" />}
  disabled={props.item.stock === 0}
  onClick={onClickAddBtn}
>
  Add
</Button>

cartList.length > 2 落后一个更新。

Answer 1

为什么需要保持长度与状态同步？你不能这样做吗：

const CartComponent = () => {

  const cartList = useSelector((state) => state.cart.cartItems);

  const onClickAddBtn = () => {
    if(cartList && cartList.length > 4) alert(`cannot add more than ${cartList.length} items`);
  }
  return (
    <button onClick={onClickAddBtn}>
      Add
    </button>
  )
}

您还应该检查 redux 状态是否实际更新。你也许正在改变状态？一个好的做法是在你的减速器中使用immer，以确保你的状态是不可变的。如果它发生了变异，React 可能不会接受状态变化，因为对数据的引用没有改变。

Answer 2

完全删除 cartSize。它总是落后一个渲染。

function CartComp(props) {
  const cartList = useSelector((state) => state.cart.cartItems);

  const onClickAddBtn = () => {
    if (cartList.length > 4) {
      alert(`cannot add more than ${cartList.length} items`);
    }
  };

  return <button onClick={onClickAddBtn}>
      Add
    </button>;
};