Next.js配置ContextAPI时出现Cannot read properties of undefined (reading 'Provider')错误

问题根源及修复步骤 #

1. Context创建时的解构错误 #

你在创建Context时错误使用了解构赋值：

const { PropContext } = createContext();

createContext()直接返回一个Context实例，并非包含PropContext属性的对象，这会导致PropContext为undefined，自然无法读取它的Provider属性。

修正后的Context创建代码：

import React, { createContext, useState } from 'react';
// 直接赋值，无需解构
const PropContext = createContext();
export default PropContext;

export const PropContextProvider = ({ children }) => {
    const [username, setUsername] = useState([])
    const contextData = {
        username: username,
        setUsername: setUsername
    }
    return(
        <PropContext.Provider value={contextData} >
            { children }
        </PropContext.Provider>
    )
}

2. Provider的使用方式错误 #

你的index.js里把PropContextProvider当成空标签放在内容前后，完全起不到提供Context的作用，需要把所有需要访问该Context的组件包裹在Provider内部。

修正后的index.js代码：

export default function Home() {
  const [steps, setSteps] = useState(1);
  return (
    <PropContextProvider>
      <div className="homeBackGround">
        <div className={styles.container}>
          <Head>
            <title>Interactive World!</title>
          </Head>
          {/* 这里放置你的其他页面内容 */}
        </div>
      </div>
    </PropContextProvider>
  )
}

内容的提问来源于stack exchange，提问作者Emm