英文:
Failed to pass state to other router with useNavigate
问题
你好，我有一个电子商务的React应用程序，想要在用户完成付款后，从路由“/cart”将状态数据传递到“/success”，为此我在我的购物车路由中使用了useNavigate，在成功路由中使用了useLocation来获取状态，但是在console.log之后，状态为null。我不知道如何解决这个问题，我需要帮助。以下是控制台日志：
哈希：""
键： "7e7cgplo"
路径名： "/success"
搜索：""
状态：null
我应该能在状态中看到我的Stripe付款数据（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])
// 其他代码...
Success.js
import React from 'react'
import { useLocation } from 'react-router-dom'
const Success = () => {
const location = useLocation();
console.log(location)
return (
<div>成功！！</div>
)
}
export default Success
英文:
Hello i have a ecommerce react application and want to pass my state data from router "/cart" to "/success" after user finish the payment, to do that i use useNavigate in my cart route and in the success route i use useLocation to get the state, but after console.log the state is null. I have no clue to solve this problem, i need help Thanks.
This is the console log :
hash: ""
key: "7e7cgplo"
pathname: "/success"
search: ""
state: null
I should be able to see my stipe payment data in the state(the api is working fine)
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
答案1
得分: 1
在你的示例中问题在于你将数据传递为 data，而应该是 state：
navigate('/success', { state: response.data })
英文:
In your example the issue is that you are passing the data as data, it should be state instead:
navigate('/success', { state: response.data })
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论