我正在创建一个电子商务应用程序Nextjs
并希望在页面之间共享数据。我知道我们不能使用props
在页面之间传递数据,所以正在研究反应context
API。这是我第一次使用 React context api。我研究过,发现你应该在nextjs的_app.js页面中添加Provider。
但这会在所有页面之间共享数据。另外我的数据正在被检索getStaticProps
在应用程序的 slug 页面中。我想将此数据放入我的应用程序的结账页面。
这是我创建的上下文:
import { createContext, useState, useContext } from 'react';
const productContext = createContext({} as any);
export const ProductProvider = ({ children }) => {
const [productData, setProductData] = useState('');
return <productontext.Provider value={{ productData, setProductData }}>{children}</productContext.Provider>;
};
export const useProduct = () => useContext(productContext);
_app.js
import { ReportProvider } from '../contexts/ReportContext';
export default function CustomApp({ Component, pageProps }) {
return (
<ReportProvider>
<Component {...pageProps} />
</ReportProvider>
);
}
我将其导入 slug 页面并尝试从此处更新状态
// [slug].js
import client from '../../client'
import {useProduct} from './productContext';
const Post = (props) => {
const {setProductData} = useProduct();
const { title = 'Missing title', name = 'Missing name' , price} = props
setProductData(title);
return (
<article>
<h1>{title}</h1>
<span>By {name}</span>
<button>
<a href="/checkout">Buy Now</a>
</button>
</article>
)
}
Post.getInitialProps = async function(context) {
const { slug = "" } = context.query
return await client.fetch(`
*[_type == "post" && slug.current == $slug][0]{title, "name": author->name, price}
`, { slug })
}
export default Post
但是,无法从其他页面访问此产品数据,并且反应上下文状态不会更新。
知道为什么会发生这种情况吗?