小编Mar*_*Ali的帖子

我正在创建一个电子商务应用程序，Nextjs并希望在页面之间共享数据。我知道我们不能用来props在页面之间传递数据，所以正在研究 React contextapi。这是我第一次使用 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> …