React Context API调用异常：页面空白问题求助

本人近期正在学习React Context API，在个人项目中实践时遇到问题：已在index.js中用Context组件包裹应用，Context.js中创建了Mycontext及包含状态的Context组件，但在组件中以Const[type,setType]= createContext(Context);调用后，页面变为空白，不清楚问题所在，寻求帮助。

相关代码如下：

Context.js #

import { createContext, useState } from "react";
import React from "react";

export const Mycontext = createContext([]);

export function Context({ children }) {
    // put all states here
    const [type, setType] = useState(0)
    const [color, setColor] = useState('white')

    return (
        <Mycontext.Provider value={[type, setType, color, setColor]}>
            {children}
        </Mycontext.Provider>
    )
}

export default Context

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Context from './Context';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Context>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Context>
);

问题根源 #

你调用Context的代码存在三处关键错误：

1. 语法错误：Const 应该是小写的 const，JavaScript 对大小写敏感，大写会引发语法报错。
2. 方法误用：获取Context中的值不能用createContext——这个方法是用来创建Context对象的，正确方式是使用useContext钩子。
3. 参数错误：createContext的参数是Context的默认值，不是你创建的Context组件，应该传入导出的Mycontext对象。

以上错误会导致组件渲染逻辑崩溃，最终页面呈现空白。

正确使用方式 #

在需要使用Context状态的组件中，按以下步骤修改：

1. 导入useContext钩子和Mycontext对象：

import { useContext } from 'react';
import { Mycontext } from './Context';

2. 使用useContext获取Context中的状态与方法：

const [type, setType, color, setColor] = useContext(Mycontext);

示例组件代码（以App.js为例） #

import { useContext } from 'react';
import { Mycontext } from './Context';

function App() {
  const [type, setType, color, setColor] = useContext(Mycontext);

  return (
    <div style={{ backgroundColor: color, padding: '20px' }}>
      <p>当前type值：{type}</p>
      <button onClick={() => setType(prev => prev + 1)}>增加type</button>
      <button onClick={() => setColor(color === 'white' ? 'lightblue' : 'white')}>切换背景色</button>
    </div>
  );
}

export default App;

额外优化建议 #

• 建议把Context的value改成对象形式，这样解构时不用严格对应顺序，可读性更强：

// Context.js中修改Provider的value
<Mycontext.Provider value={{ type, setType, color, setColor }}>
  {children}
</Mycontext.Provider>

// 组件中使用
const { type, setType, color, setColor } = useContext(Mycontext);

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