(Nextreact)子组件中的按钮点击产生的SWR刷新 - 我可以使用回调吗？(函数对函数)

Question

我正在用Next.js制作一个购物车组件，但在更新购物车数据后，出现了刷新问题。我的购物车组件是Next.js文档中推荐的一个函数(https:/nextjs.orgdocsbasic-featuresdata-fetching#fetching-data-on-the-client-side。)，我在这个里面有一个叫做products.js的组件，包含我的产品列表，每个产品都有+-按钮来调整它们的数量(发布到数据库)。

我的数据库更新了，但我需要在购物车组件的客户端重新获取数据。我意识到我可以使用swrs'mutate'来重新获取swr调用，但是当我尝试从我的cart.js传递一个回调函数到products.js时，它显示在控制台日志中，但是在我的按钮点击时没有被调用。

我试过 cartUpdate = cartUpdate.bind(this) 这几天也看了一下钩子，也尝试了其他的东西，但是可以使用一些建议。

如果cart.js是一个类组件，我会将我的 cartUpdate 在传给 product.js 之前，先把函数传给product.js，这样就可以了，但是当函数对函数和类对函数的时候，我似乎不能做到同样的事情。

我已经在这个问题上研究了几天，我不知道我是不是想违背一些我不知道的规则，或者说我怎样才能在重新获取数据的同时，还能让我的代码保持分离，有点干净。

产品.js.cart.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()}) 不知道我怎么忽略了这个问题，也不知道之前的测试是怎么回事，但是现在可以用了。我想休息一下，再带着新的眼光回来，就会有效果。