我是 Next.js 的新手,正在尝试制作一个电子商务项目。我陷入困境,如果子组件排序组件有一个到服务器的发布请求来过滤数据并将其作为产品道具传递回产品组件。
文件夹结构是这样的:
<>
<Sort />
<Products products={products} />
</>
Run Code Online (Sandbox Code Playgroud)
在排序组件内,我会将过滤器参数发送回服务器。所以我想到的方法是使用Redux,但是我可以使用useSWR
hook吗?由于操作是在排序组件中执行的,似乎useSWR
钩子需要将操作和数据一起返回到同一组件中,这是正确的吗?
在我的 Next js 项目中,我使用了 Next auth,其中import {Provider} from 'next-auth/client'
,并将 包装<Component />
在 _app.js 中。
但是,同时,我想在项目中添加redux。它会import {Provider} from 'react-redux'
,并且还需要将<Component />
_app.js包装起来。
所以在这种情况下,他们使用的是相同的Provider
,我尝试过导入破坏,但它给了我一个 Synatx 错误Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.
。那我该怎么办?
import { Provider } from "next-auth/client";
function MyApp({ Component, pageProps }) {
return (
<>
<Provider
options={{
clientMaxAge: 0,
keepAlive: 0,
}}
session={pageProps.session}
>
<Component {...pageProps} />
</Provider>
</>
);
}
Run Code Online (Sandbox Code Playgroud)