(Next/react)SWR从子组件中的按钮点击刷新-我可以使用回调吗??(函数对函数)

Question

我正在用Next.js制作一个购物车组件，在更新后刷新购物车数据时遇到问题(https://nextjs.org/docs/basic-features/data-fetching#fetching-客户端的数据(，我在其中有一个名为products.js的组件，包含我的产品列表，每个产品都有+/-按钮来调整它们的数量(发布到数据库(。

我的数据库更新了，但我需要在cart组件的客户端重新获取数据。我已经意识到我可以使用swrs"mutate"重新获取swr调用，但当我试图将回调函数从cart.js传递到products.js时，它会显示在控制台日志中，但在我点击按钮时不会被调用。

我试过cartUpdate = cartUpdate.bind(this)，在过去的几天里也研究过钩子，并尝试过其他事情，但可能需要一些建议。

如果cart.js是一个类组件，我会在将cartUpdate函数传递给product.js之前绑定它，这会起作用，但当它是函数对函数还是类对函数时，我似乎无法做到这一点。

我已经研究了几天了，我不确定我是否试图违反一些我不知道的规则，也不确定我如何在保持代码分离和干净的同时重新获取数据。

products.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>
)
}

cart.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>
)
} 

Answer 1

您是否使用全局mutate(是的，有2个(？然后你需要把一个SWR密钥传给它

全球mutate:

import useSWR, { mutate } from 'swr'
...
const { data } = useSWR(key, fetcher)
mutate(key) // this will trigger a refetch

或者使用绑定的mutate，并且不需要通过key:

import useSWR from 'swr'
...
const { data, mutate } = useSWR(key, fetcher)
mutate() // this will trigger a refetch

Answer 2

因此，为了结束这一点，我在处理完项目的其他领域后又回到了它，并意识到它就像使用普通函数调用而不是箭头函数一样简单。例如，.then(res => {feUpdate()})不知道我是如何忽略这一点的，也不知道以前测试中发生了什么，但现在它正在工作。我想休息一下，带着新鲜的眼光回来就行了。