反應上下文 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;