Javascript React上下文API/Hooks

我对上下文API相当陌生。基本上，我想当我按下ButtonComponent中的按钮时，按钮以及ImageComponent中的所有内容都会消失，但我得到了这个错误（TypeError:render不是函数updateContextConsumer）。快速注意按钮在侧边栏组件中呈现。我被这个错误/错误卡住了，如果可能的话，我会非常感谢别人的帮助

HiddenContext
import React, { useState } from 'react';
export const HiddenContext =React.createContext(false)

function HiddenProvider ({children}) {
    const[hideButton, setHideButton]= React.useState(false)

function handleClick (){
    setHideButton(true)
}

return(
    <HiddenContext.Provider value ={{hideButton,handleClick}}>
        {children}
    </HiddenContext.Provider>
);
}



import React, { useState } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import ImageComponent from './ImageComponent';
import { HiddenContext, } from './HiddenContext';



function App() {
  
 const{ hideButton}=React.useContext(HiddenContext)
  

  return (
    <div className="App">  
       <Sidebar />
        <HiddenContext>
         <ImageComponent hideButton={hideButton}   />
        </HiddenContext>                            
    </div>
        
   );    
}

export default App;



ImageComponent
import React, {useState, ReactFragment} from 'react'
import {
    BrowserRouter as Router,
     Link
  } from "react-router-dom";
import { HiddenContext, } from './HiddenContext';


const ImageComponent=()=>{
const { hideButton } = React.useContext(HiddenContext);
 
  return (
        <div>
           
           {!hideButton &&  (  
           <React.Fragment>
           <Router>
           <Link className="google"
           onClick={() => {
           window.location.href = 'https://google.com/';
           }}>   
           <img src="./icons/icons8-google-48.png" alt="Google"/>
           <figcaption>Image</figcaption>
           </Link>
           </Router>
           </React.Fragment>)}
            </div>
            )
              }
        

ButtonComponent
import React, {useState, ReactFragment} from 'react'
const ButtonComponent =()=>
const { hideButton, handleClick } = React.useContext(HiddenContext);
    return(
      <div>
      <React.Fragment>
     {!hideButton &&(
    <li>
    <img className="image"src="./icons/icons8-button-48.png"/>
    <Button onClick={handleClick} variant="outlined" className="button__rightpage" >Button</Button>
    <caption className="text"> Button</caption>
    </li>)}
    </React.Fragment>
      </div>
)
}

隐藏上下文
从“React”导入React，{useState}；
export const HiddenContext=React.createContext（false）
函数HiddenProvider（{children}）{
const[hideButton，setHideButton]=React.useState（false）
函数handleClick（）{
设置隐藏按钮（真）
}
返回(
{儿童}
);
}
从“React”导入React，{useState}；
导入“/App.css”；
从“./Sidebar”导入侧栏；
从“./ImageComponent”导入ImageComponent；
从“/HiddenContext”导入{HiddenContext，}；
函数App（）{
const{hideButton}=React.useContext（HiddenContext）
返回(
);    
}
导出默认应用程序；
图像组件
从“React”导入React，{useState，ReactFragment}
进口{
BrowserRouter作为路由器，
链接
}从“反应路由器dom”；
从“/HiddenContext”导入{HiddenContext，}；
常量ImageComponent=（）=>{
const{hideButton}=React.useContext（HiddenContext）；
返回(
{！隐藏按钮&&（
{
window.location.href=https://google.com/';
}}>   
形象
)}
)
}
按钮组件
从“React”导入React，{useState，ReactFragment}
常量按钮组件=（）=>
const{hideButton，handleClick}=React.useContext（HiddenContext）；
返回(
{！隐藏按钮&&(

按钮
按钮
）}
)
}

问题是您正在使用

HiddenContext

包装

ImageComponent

，而应该使用

HiddenProvider

包装它。那会解决你的问题。在导入HiddenProvider之前，需要将其导出

import React, { useState } from 'react';
export const HiddenContext =React.createContext(false)

export const HiddenProvider = ({children}) => {
    const[hideButton, setHideButton]= React.useState(false)

    function handleClick (){
       setHideButton(true)
    }

    return(
        <HiddenContext.Provider value ={{hideButton,handleClick}}>
           {children}
        </HiddenContext.Provider>
    );
}




import React, { useState } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import ImageComponent from './ImageComponent';
import { HiddenProvider } from './HiddenContext';



function App() {
  
 const{ hideButton}=React.useContext(HiddenContext)
  

  return (
    <div className="App">  
       <Sidebar />
        <HiddenProvider>
          <ImageComponent hideButton={hideButton}   />
        </HiddenProvider>                            
    </div>
        
   );    
}

export default App;

import React，{useState}来自“React”；
export const HiddenContext=React.createContext（false）
导出常量HiddenProvider=（{children}）=>{
const[hideButton，setHideButton]=React.useState（false）
函数handleClick（）{
设置隐藏按钮（真）
}
返回(
{儿童}
);
}
从“React”导入React，{useState}；
导入“/App.css”；
从“./Sidebar”导入侧栏；
从“./ImageComponent”导入ImageComponent；
从“./HiddenContext”导入{HiddenProvider}；
函数App（）{
const{hideButton}=React.useContext（HiddenContext）
返回(
);    
}
导出默认应用程序；

它不允许我导入它，它说“尝试导入错误：'HiddenProvider'不是从“/HiddenContext”导出的。”我在评论中提到，您需要从HiddenContext文件导出HiddenProvider，就像您导出HiddenContext一样。我已经完成了“从“/HiddenContext”导入{HiddenProvider}；”在应用程序中，但它给了我一个错误。您能用新代码和错误消息更新问题吗？从“/HiddenContext”导入{HiddenProvider}；从“./HiddenContext”导入{HiddenContext}；函数App（）{const{hideButton}=React.useContext（HiddenContext）return（）；}导出默认应用程序；