reactjs 无法使用useNavigate将状态传递到其他路由器

w9apscun  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(137)

你好,我有一个电子商务React应用程序,并希望通过从路由器我的状态数据“/购物车”到“/成功”用户完成付款后,要做到这一点,我使用useNavigate在我的购物车路线和成功的路线,我使用useLocation来获取状态,但console.log后的状态为空。我没有线索来解决这个问题,我需要帮助谢谢。
这是控制台日志:

hash: ""
key: "7e7cgplo"
pathname: "/success"
search: ""
state: null

我应该可以看到我的stipe支付数据的状态(API工作正常)
Cart.js

const Cart = () => {

    const cart = useSelector(state=>state.cart);
    const [ stripeToken, setStripeToken ] = useState(null);
    const navigate = useNavigate();
    
    const onToken = (token) => {
        setStripeToken(token);
    }

    console.log(stripeToken)

    useEffect(() => {
        const makeRequest = async () => {
            try{
                const response = await userMethod.post("/test", {
                    tokenId: stripeToken.id,
                    amount: 500,
                })
                navigate("/success", { data: response.data });
            } catch (err) {
            } 
        }
        stripeToken &&  makeRequest();
    }, [stripeToken, cart.total, navigate])


  return (
    <Container>
        <Navbar />
        <Wrapper>
            <Title>Your Bag</Title>
            <Top>
                <TopButton>Continue Shopping</TopButton>
                <TopTexts>
                    <TopText>Shooping Bag({cart.quantity})</TopText>
                    <TopText>Your Wishlist</TopText>
                </TopTexts>
                <TopButton type="filled">Checkout Now</TopButton>
            </Top>
            <Bottom>
                <Info>
                {cart.products.map((product) => (
                    <Product>
                        <ProductDetail>
                            <Image src={product.img} alt="google"></Image>
                            <Details>
                                <ProductName><b>Product:</b> {product.title}</ProductName>
                                <ProductId><b>ID:</b> {product._id}</ProductId>
                                {/* <ProductColor color="black" />
                                <ProductSize><b>Size:</b> XL</ProductSize> */}
                            </Details>
                        </ProductDetail>
                        <PriceDetail>
                            <ProductAmountContainer>
                                <AiOutlineMinus />
                                <ProductAmount>{product.quantity}</ProductAmount>
                                <GrAdd />
                            </ProductAmountContainer>
                            <ProductPrice>$ {product.price * product.quantity}</ProductPrice>
                        </PriceDetail>
                    </Product>
                        ))}
                    <Hr></Hr>
                </Info>
                <Summary>
                    <SummaryTitle>Order Summary</SummaryTitle>
                        <SummaryItem>
                            <SummaryItemText>Subtotal</SummaryItemText>
                            <SummaryItemPrice>$ {cart.total}</SummaryItemPrice>
                        </SummaryItem>
                        <SummaryItem>
                            <SummaryItemText>Estimated Shipping</SummaryItemText>
                            <SummaryItemPrice>$ 5</SummaryItemPrice>
                        </SummaryItem>
                        <SummaryItem>
                            <SummaryItemText>Shipping Discount</SummaryItemText>
                            <SummaryItemPrice>$ -6</SummaryItemPrice>
                        </SummaryItem>
                        <SummaryItem>
                            <SummaryItemText type="total">Total</SummaryItemText>
                            <SummaryItemPrice>$ {cart.total}</SummaryItemPrice>
                        </SummaryItem>
                        <StripeCheckout 
                            name="Kimia shop" 
                            image="https://d3o2e4jr3mxnm3.cloudfront.net/Mens-Jake-Guitar-Vintage-Crusher-Tee_68382_1_lg.png"
                            billingAddress
                            shippingAddress
                            description={`your total is $ ${cart.total}`}
                            amount={cart.total * 100}
                            token={onToken}
                            stripeKey={KEY}
                            >
                            <Button>Checkout Now</Button>
                        </StripeCheckout>
                </Summary>
            </Bottom>
        </Wrapper>
        <Footer />
    </Container>
  )
}

export default Cart

Success.js

import React from 'react'
import { useLocation } from 'react-router-dom'

const Succes = () => {
  
  const location = useLocation();

  console.log(location)

  return (
    <div>Succes!!</div>
  )
}

export default Succes
58wvjzkj

58wvjzkj1#

在您的示例中,问题是您将数据作为data传递,它应该是state

navigate('/success', { state: response.data })

相关问题