javascript - 重新加载 Commerce.js 结帐页面时出错(反应教程)
问题描述
我目前正在为 Commerce.js Api 编写 React.js 结帐教程。
当我单击购物车中的结帐按钮时,它会将我带到结帐页面并生成应有的结帐令牌,但我注意到当我重新加载结帐页面时,控制台显示以下错误:错误 图像。
这是结帐页面的代码:
import React, { useEffect, useState } from 'react';
import { commerce } from '../../lib/commerce';
import './styles.css';
const Checkout = ({ cart }) => {
const [checkoutToken, setCheckoutToken] = useState({});
useEffect(() => {
generateCheckoutToken();
}, [])
const generateCheckoutToken = () => {
if (cart.line_items.length) {
commerce.checkout.generateToken(cart.id, { type: 'cart' })
.then((token) => {
setCheckoutToken(token);
console.log(checkoutToken);
}).catch((error) => {
console.log('There was an error in generating a token', error);
});
}
}
return (
<div>
Checkout
</div>
)
}
export default Checkout
我认为这与使用该generateCheckoutToken()
功能之前未加载购物车有关,但我不明白如何解决该问题。
这是 App.js:
import { useEffect, useState } from 'react';
import { commerce } from './lib/commerce';
import { Routes, Route } from 'react-router-dom';
import ProductsList from './components/ProductList/ProductsList';
import Cart from './components/Cart/Cart';
import Checkout from './components/Checkout/Checkout';
import './App.css';
function App() {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState({});
const [prductLoading, setProductLoading] = useState(false);
const [cartBtn, setCartBtn] = useState(false);
const fetchProducts = () => {
commerce.products.list().then((products) => {
setProducts(products.data);
setProductLoading(false);
}).catch((error) => {
console.log('There was an error fetching the products', error);
});
}
const fetchCart = () => {
commerce.cart.retrieve().then((cart) => {
setCart(cart)
}).catch((error) => {
console.error('There was an error fetching the cart', error);
});
}
const handleAddToCart = (productId, quantity) => {
commerce.cart.add(productId, quantity).then((item) => {
setCart(item.cart)
}).catch((error) => {
console.error('There was an error adding the item to the cart', error);
});
}
const handleUpdateCartQty = (lineItemId, quantity) => {
commerce.cart.update(lineItemId, { quantity }).then((resp) => {
setCart(resp.cart)
}).catch((error) => {
console.log('There was an error updating the cart items', error);
});
}
const handleRemoveFromCart = (lineItemId) => {
commerce.cart.remove(lineItemId).then((resp) => {
setCart(resp.cart)
}).catch((error) => {
console.error('There was an error removing the item from the cart', error);
});
}
const handleEmptyCart = () => {
commerce.cart.empty().then((resp) => {
setCart(resp.cart)
}).catch((error) => {
console.error('There was an error emptying the cart', error);
});
}
const handleCloseCart = () => {
setCartBtn(false);
}
useEffect(() => {
setProductLoading(true);
fetchProducts();
fetchCart();
}, [])
// console.log(cart);
return (
<div className="App">
<Routes>
<Route
exact
path='/'
element={
<div className='home'>
<div className={`cart-button ${cartBtn && 'cartOpen'}`}>
{cartBtn ?
<Cart
cart={cart}
onUpdateCartQty={handleUpdateCartQty}
onRemoveFromCart={handleRemoveFromCart}
onEmptyCart={handleEmptyCart}
closeCartBtn={handleCloseCart}
/>
:
<p onClick={() => setCartBtn(true)}>Open cart</p>
}
</div>
{prductLoading ?
'Loading...'
:
<ProductsList
products={products}
onAddToCart={handleAddToCart}
/>
}
</div>
}
/>
<Route
exact
path='/checkout'
element={
<Checkout
cart={cart}
/>
}
/>
</Routes>
</div>
);
}
export default App;
如果有人能告诉我我缺少什么,我将不胜感激,谢谢您的帮助!
解决方案
问题
cart
在状态下初始化时App
,它是一个空对象{}
。这是作为道具传递给Checkout
.
一旦Checkout
挂载,它就会调用generateCheckoutToken
,它会尝试读取cart.line_items.length
。如果发生这种情况之前fetchCart
在父项中调用,cart
则为空对象,无法line_items
计数。这是一个竞赛条件。
一种解决方案
一种解决方案是监听 中cart
的变化useEffect
,并且只generateCheckoutToken
在cart
有时调用line_items
。这可能不支持您未来的设计目标,但应该可以解决此错误。
// Checkout
useEffect(() => {
if(cart.line_items) {
generateCheckoutToken();
}
}, [cart])
推荐阅读
- r - 将 ggplot2 与 Rshiny 一起使用:ggplot y 轴上显示的级别不正确
- c++ - 递归函数的帕斯卡三角形
- android - 双簧管音频流格式:int16_t格式会消失吗?
- laravel - 递归地将模型添加到 Scout Laravel
- node.js - Node.JS 致命错误:堆限制附近的无效标记压缩分配失败?
- sql - 在几天内运行列中唯一字符串值的总数
- javascript - 查找模式,然后通过结束新行拆分
- java - 为什么它在字符串中返回错误的重复次数?
- react-native - 选项卡导航器中的图标图像被切断 - 反应原生
- .net - 以 100 倍高效方式瞄准一个端点