为什么我要获得不确定的道具？

Question

下面是我在 React 中的 Header 组件：

import React from 'react'
import {AppBar} from '@material-ui/core'
import {Typography,Container,Toolbar,Select,MenuItem} from '@material-ui/core'
import {useNavigate} from 'react-router-dom'
import { CryptoState } from './CryptoContext'
const Header = () => {
 const navigate=useNavigate();
 const {currency,setCurrency}=CryptoState();
  return (
       <AppBar>
           <Container>
               <Toolbar>
                   <Typography onClick={()=>navigate('/')}>
                       CryptoTracker
                   </Typography>
                   <Select value={currency}
                   onClick={(e)=>setCurrency(e.target.value)}
                   >
                       <MenuItem value="USD">USD</MenuItem>
                       <MenuItem value="INR">INR</MenuItem>
                   </Select>
               </Toolbar>
           </Container>
       </AppBar>
  )
}

export default Header

我使用 ContextAPI 进行高效的状态管理。CryptoState 用于此目的。我已在 Header 中导入状态并使用对象解构获取必要的 props。

下面是我的上下文文件：

import React from 'react'
import { useEffect } from 'react';
import { createContext ,useState,useContext } from 'react';
const CryptoContext = ({children}) => {
    const Crypto=createContext();
    const [currency,setCurrency]=useState("USD");
    const [symbol,setSymbol]=useState("$");

    useEffect(()=>{
      if(currency=="INR")
      setSymbol("₹") 
      else
      setSymbol("$") 
    })
  return (
    <Crypto.Provider value={{currency,symbol,setCurrency}}>
        {children}
    </Crypto.Provider>
  )
}

export default CryptoContext;
export const CryptoState=()=>{
    return useContext(Crypto);
}

我在标头组件中收到此错误：Header.js:8 Uncaught TypeError: Cannot destruct property 'currency' of '(0 , _CryptoContext__WEBPACK_IMPORTED_MODULE_1__.CryptoState)(...)'未定义。

Answer 1

在您的 CryptoState 函数中，Crypto 未定义，因为它是在 CryptoContext 中初始化的。

Crypto 上下文应从您的 CryptoContext 组件中提取，并在任何可用函数之外声明为 const