React useContext问题：状态toggle显示undefined的解决方法

你遇到的问题是MainSection组件没有通过useContext钩子获取上下文状态，直接访问toggle变量当然会提示未定义。按以下步骤修改代码即可解决：

1. 在MainSection组件所在的文件中，从React导入useContext钩子
2. 在MainSection内部调用useContext(reactContext)，获取上下文里的状态和方法
3. 通过解构或直接访问上下文对象来使用toggle

修正后的完整代码 #

import React, { useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom';

const languages = ['JavaScript', 'Python'];
export const reactContext = React.createContext()

function App() {
  const [toggle, setToggle] = useState(false)
  return (
    <reactContext.Provider value={{toggle, setToggle}}>
      <MainSection />
    </reactContext.Provider>
  );
}

function MainSection() {
  // 从上下文获取toggle和setToggle
  const { toggle, setToggle } = useContext(reactContext);
  console.log(toggle)
  
  // 补充切换逻辑，点击按钮改变toggle状态
  const handleToggle = () => {
    setToggle(prev => !prev);
  }

  return (
    <div>
      <p id="favoriteLanguage">Favorite programing language: {languages[toggle ? 1 : 0]}</p>
      <button id="changeFavorite" onClick={handleToggle}>Toggle language</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

补充说明：代码里添加了点击按钮切换语言的逻辑，让toggle状态的变化能直接体现在页面上，你可以根据实际需求调整。

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