子组件无法访问通过上下文挂钩传递的函数[关闭]

Question

我正在使用 react context hooks API 并且在通过我的提供程序时遇到了这个函数的问题，但子组件似乎无法运行它。

以下是我的 app.js 文件

// import "./App.css";
import React, {useState} from "react";
import Test from "./Test"

import {ThemeContext,ThemeUpdateContext} from "./Contexts";


function App() {
  const [logged, setLogged] = useState(false);
  
  
  function connectRoom(){
    console.log("hello");
    setLogged(true);
  }
  return (
   
    <ThemeContext.Provider value={logged}>
      <ThemeUpdateContext.Provider value={connectRoom}>
        <Test />
      </ThemeUpdateContext.Provider>
    </ThemeContext.Provider>
  
   
  );
}

export default App;

以下是我创建上下文的 Contexts.js 文件。

import { createContext } from "react";

export const ThemeContext = createContext(null);
export const ThemeUpdateContext = createContext(null);

以下是我的 Test.js 文件，我在其中创建了一个简单的登录/注销页面，当单击按钮时会切换。

import React from 'react'
import {ThemeContext,ThemeUpdateContext} from './Contexts'

export default function Test() {

    const {logged} = React.useContext(ThemeContext)
    const {connectRoom} = React.useContext(ThemeUpdateContext)
    
    return (
        <div>
           {!logged ? (
        <h1> not logged</h1>
      ):(<h1>logged</h1>)}

      <button onClick={connectRoom}> click me</button> 
        </div>
    )
}

Test.js 组件如下所示：

我需要帮助了解为什么当我单击按钮时页面没有切换到已登录，以及为什么当我单击它时它没有控制台记录任何内容。

Answer 1

<ThemeContext.Provider value={logged}>
// ...
const {logged} = React.useContext(ThemeContext)

当您使用上下文时，您正在解构它，就好像您期望一个具有.logged 属性的对象一样，但这不是您提供的。您刚刚直接提供了值，这是一个布尔值。因此，您实际上是在尝试访问未定义的(false).logged。您的其他上下文也会发生类似的问题。

解决方法是像这样使用它们：

const logged = React.useContext(ThemeContext)
const connectRoom = React.useContext(ThemeUpdateContext)