Я создаю компонент корзины покупок с помощью Next. js, и у меня возникла проблема с обновлением данных корзины после обновления. Компонент моей тележки - это функция, рекомендованная в документации Next. js (https://nextjs.org/docs/basic-features/data-fetching#fetching -data-on-the-client-side ), и у меня есть компонент внутри этого продукта. js, содержащий мой список продуктов, у каждого из которых есть кнопки +/- для регулировки их количества (публикация в базе данных).
Моя база данных обновляется, но мне нужно повторно получить данные на стороне клиента в компоненте корзины. Я понял, что могу повторно получить вызов swr, используя swrs 'mutate', но когда я пытаюсь передать функцию обратного вызова из моей корзины. js в продукты. js, это отображается в журнале консоли, но не t вызвал нажатие моей кнопки.
Я пробовал cartUpdate = cartUpdate.bind(this), а также изучал хуки последние пару дней и пробовал другие вещи, но мог бы воспользоваться некоторыми советами.
Если бы cart. js был компонентом класса, я бы связал свою функцию cartUpdate перед передачей ее продукту. js, и это сработало бы, но я не могу сделать то же самое, когда это функция для функции vs класс для функции.
Я был на этом пару дней, и я не уверен, пытаюсь ли я go нарушить некоторые правила, о которых я не знаю, или как я могу повторно получить свои данные, сохраняя при этом мой код разделенным и несколько чистым.
продукты. js:
export default function productsection ({products, cart, cartproducts, feUpdate}){
console.log("feUpdate", feUpdate)
return (
<div>
{products.map((product, i) => (
<div className="flex-column justify-content-center mx-2">
<div className="mx-auto card w-100 p-2 my-2">
<div className="card-body ">
<h5 className="card-title text-center">{product.name}</h5>
<div className="d-flex justify-content-between">
{/* <p>Size Selected: {product.size}</p> */}
{/* <p>Total: {product.price * props.cartproducts[i].qty} USD</p> */}
<button className='btn btn-light mx-2' onClick={() => {
fetch(`/api/db/editCartProducts`,{
method: 'post',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({task: 'ADD', orderid: cart.orderid, productid: product.productid})
}).then(res => {console.log("adding: " + product.name + " from cart.", "id: " + product.productid); () => feUpdate(); console.log("passed update")})
}}
>
Add
</button>
<p className="px-2">Price: {product.price} USD EA</p>
<p className="px-2">{product.description}</p>
<p>Quantity: {cartproducts[i].qty}</p>
<button className='btn btn-light mx-2' onClick={() => {
fetch(`/api/db/editCartProducts`,{
method: 'post',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({task: 'REMOVE', orderid: cart.orderid, productid: product.productid})
}).then(res => {console.log("removing: " + product.name + " from cart.", "id: " + product.productid);() => feUpdate(); console.log("passed update")})
}}>
Remove
</button>
</div>
</div>
</div>
</div>
))}
</div>
)
}
тележка. js: (основные моменты: cartUpdate() & ProductSection в которое я передаю cartUpdate)
function Cart (props){
const fetcher = (...args) => fetch(args[0], {
method: 'post',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({[args[2]]:args[1]})
}).then(res => res.json())
let User = Cookies.get('User')
async function cartUpdate(){
console.log("mutate called");
console.log("isValidated: ", isValidating)
mutate();
console.log(cartitems);
console.log("isValidated: ", isValidating)
}
const { data: user, error} = useSWR(() => [url1, User, "User"], fetcher, {suspense: false });
console.log("User returned: ", user)
const { data: cart, error2} = useSWR(() => [url2, user.customerid, 'User'], fetcher, { suspense: false });
console.log("Cart returned: ", cart)
// const OrderId = Cookies.get('orderid')
const { data: cartitems, error3, mutate, isValidating} = useSWR(() => [url3, cart.orderid, 'orderid'], fetcher, { suspense: false });
console.log("Cart items: ", cartitems)
console.log("before productdetails call")
const { data: productdetails, error4} = useSWR(() => [url4, cartitems, 'productids'], fetcher, { suspense: false });
console.log("productdetails: ", productdetails)
let itemtotal = 0;
let costtotal = 0;
if(productdetails && cartitems){
productdetails.forEach((product, i) => {
itemtotal = itemtotal + (cartitems[i].qty);
costtotal = costtotal + (product.price * cartitems[i].qty)
})
console.log("totals: ", itemtotal, costtotal)
}
if (productdetails) {
console.log(props)
// foreach to get total price of cart and total items count.
return (
<div className="jumbotron jumbotron-fluid mt-5 d-flex flex-column justify-content-center">
<Header name={user.fname}/>
<div className={!isValidating? "card text-center" : "text-center"}>isValidating??</div>
<div className="d-flex flex-row justify-content-center">
<button onClick={() => feUpdate()}>Big Update Button</button>
<ProductSection feUpdate={cartUpdate} products={productdetails} cart={cart} cartproducts={cartitems} />
<Summery itemtotal={itemtotal} costtotal={costtotal}/>
</div>
</div>
)
}