ReactJS 给出错误 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__... 在实现 Context API 时未定义答案

【问题标题】：ReactJS giving error Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__... is undefined when implementing Context APIReactJS 给出错误 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__... 在实现 Context API 时未定义
【发布时间】：2022-07-02 02:09:21
【问题描述】：

我正在将 Context API 用于加密货币跟踪器应用。我想要的是从我在 CryptoContext.js 中创建的名为 CryptoState 的上下文中创建状态 currency 和 setCurrency 并导入到 Header 组件，所以我可以使用它们来执行功能onChange。当我从 CryptoState 导入状态时，它会出现标题中的错误并导致页面清空。

这是我的代码：

CryptoContext.js

import { createContext, useContext, useState, useEffect } from 'react'

const Crypto = createContext()

const CryptoContext = ({ children }) => {

  const [currency, setCurrency] = useState("VND")
  const [symbol, setSymbol] = useState("₫")

  useEffect(() => {
    if (currency === "VND") setSymbol("₫")
    else if (currency === "USD") setSymbol("$")
  }, [currency])

  return (
    <Crypto.Provider value={{currency, symbol, setCurrency}}>{children}</Crypto.Provider>
  )
}

export default CryptoContext

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

Header.js

import { 
  AppBar, 
  Container, 
  Toolbar, 
  Typography, 
  Select, 
  MenuItem,
} from '@material-ui/core'
import { makeStyles, createTheme, ThemeProvider } from '@material-ui/core/styles'
import { Link } from 'react-router-dom'
import { CryptoState } from '../CryptoContext'

const useStyles = makeStyles(() => ({
  title: {
    flex: 1,
    color: 'gold',
    fontFamily: 'Montserrat',
    fontWeight: 'bold',
    cursor: 'pointer'
  }
}))

const Header = () => {

  const classes = useStyles()

  const { currency, setCurrency } = CryptoState()

  const darkTheme = createTheme({
    palette: {
      primary: {
        main: '#fff',
      },
      type: 'dark'
    }
  })
  
  return (
    <ThemeProvider theme={darkTheme}>
      <AppBar color="transparent" position="static">
        <Container>
          <Toolbar>
            <Typography 
              className={classes.title}
              variant='h6'
            >
              <Link to="/"> 
                Crypto Hunter
              </Link>
            </Typography>

            <Select 
              variant="outlined"
              style={{
                width: 100,
                height: 40,
                marginRight: 15,
              }}
              defaultValue={'VND'}
              value={currency}
              onChange={(e) => setCurrency(e.target.value)}
            >
              <MenuItem value={"USD"}>USD</MenuItem>
              <MenuItem value={"VND"}>VND</MenuItem>
            </Select>
          </Toolbar>
        </Container>
      </AppBar>
    </ThemeProvider>
  )
}

export default Header

只要我在 Header.js 中通过这一行导入状态：const { currency, setCurrency } = CryptoState()，就会导致错误 TypeError: _CryptoContext__WEBPACK_IMPORTED_MODULE_0__.CryptoState() is undefined 并导致页面清空。

这是捕获的错误图像：error's image

高度赞赏所有答案。谢谢？？？？

【问题讨论】：

标签： javascript reactjs react-context use-context

【解决方案1】：

你错了。

尝试将CryptoContext 重命名为CryptoProvider。
Header 在哪里呈现？在 App.js 中？
请找出包含CryptoProvider的Provider并将其包裹在哪里：

<CryptoProvider>
  <Header />
</CryptoProvider>

在Header.js 组件中。您必须使用为 createContext 函数设置的变量。那么，请使用useContext，而不是直接调用它

// CryptoContext.js

const cryptoContext = createContext(); // remember to export this var.

然后，在Header.js

import { useContext } from 'react';
import { cryptoContext } from './CryptoContext';

const { currency, setCurrency } = useContext(cryptoContext);

【讨论】：

【解决方案2】：

如果您解决了此错误，请发送此错误的确切解决方案。

【讨论】：