useSelector 不会将变量更新为其最新值

Question

我使用 redux 来维护订单状态并从中获取 order_id...我有一个按钮可以触发这个 handleCheckout() 函数，该函数调度 order_id 的新状态。然后在付款成功时调用此 payment_success() 函数，即使 order_id 已更改，它也会打印旧值而不是新值。可能是什么问题以及可能的解决方案是什么？

function CartList({ carts, total }) {
  var dispatch = useDispatch();

  var { user } = useSelector((state) => state.auth);
  var { order_id } = useSelector((state) => state.order);

  function payment_success(payload) {
    // console.log(payload);
    // verifyPayment(payload, order_id);
    console.log(order_id);
  }

  function payment_failed() {
    console.log("Payment Failed");
  }

  function handleCheckout() {
    getOrderId(carts[0].ProductId).then(async (data) => {
      // console.log(data);
      dispatch(createOrder(data));
      var options = {
        ...data,
        handler: payment_success,
        prefill: {
          email: "test@test.com",
          contact: 8900000000,
          name: user.name,
        },
      };
      var rpay = new window.Razorpay(options);
      rpay.open();
      rpay.on("payment.failed", payment_failed);
    });
  }

  return (
    <React.Fragment>
      <div style={{ margin: "50px 40px" }}>
        <h3>My Cart</h3>
        {carts.map((cart) => (
          <CartItem {...cart} />
        ))}
      </div>
      <Container>
        <Row className="justify-content-center">
          <Col md="3" className="d-flex flex-column align-items-center">
            <p>Total: {total}</p>
            <Button onClick={handleCheckout} variant="primary">
              Order Now
            </Button>
          </Col>
        </Row>
      </Container>
    </React.Fragment>
  );
}

Answer 1

您正在从那里的最后一次渲染中对 user 变量创建一个陈旧的闭包。该变量将永远不会更新 - useSelector 触发组件更新，并且在下一次渲染中，将有一个具有正确内容的新 user 变量 - 但您的 payment_success 闭包仍然指向旧的 user 变量。