反应上下文 API/钩子

Question

我对 Context API 还很陌生。 基本上，我想当我按下 ButtonComponent 中的 Button 时，该按钮以及 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>
)
}

Answer 1

问题是你用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;