React项目CryptoState未定义及货币选择、导航功能故障求助

问题1：CryptoState获取currency/setCurrency时出现undefined，切换货币报错 #

可能原因及对应解决办法 #

• 组件未被Context Provider包裹
  确保所有用到CryptoState的组件（包括Header）都在CryptoContext.Provider的范围内，根组件（比如App.js）的结构示例：

  import { CryptoContext } from './CryptoContext';
  import { useState } from 'react';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import Header from './Header';
  import Home from './Home';
  
  function App() {
    const [currency, setCurrency] = useState('USD');
  
    return (
      <CryptoContext.Provider value={{ currency, setCurrency }}>
        <Router>
          <Header />
          <Routes>
            <Route path="/" element={<Home />} />
            {/* 其他路由配置 */}
          </Routes>
        </Router>
      </CryptoContext.Provider>
    );
  }
  
  export default App;
  

• Context初始值未正确设置
  创建CryptoContext时需设置默认值，避免解构时出现undefined：

  // CryptoContext.js
  import { createContext, useContext } from 'react';
  
  // 设置默认值，防止未包裹Provider时调用报错
  const CryptoContext = createContext({
    currency: 'USD',
    setCurrency: () => {}
  });
  
  export const CryptoState = () => useContext(CryptoContext);
  export default CryptoContext;
  

• 组件内调用拼写错误
  检查Header组件里的解构是否正确，确保变量名与Context内一致：

  // Header.js
  import { CryptoState } from './CryptoContext';
  
  const Header = () => {
    const { currency, setCurrency } = CryptoState();
  
    const handleSwitchCurrency = (e) => {
      setCurrency(e.target.value);
    };
  
    return (
      <div>
        <select value={currency} onChange={handleSwitchCurrency}>
          <option value="RON">RON</option>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
        </select>
      </div>
    );
  };
  
  export default Header;
  

问题2：navigate.push('/')无法返回主页 #

可能原因及对应解决办法 #

• React Router版本适配问题
  若使用React Router v6，navigate.push是v5的写法，v6中直接调用navigate('/')即可：

  // Header.js
  import { useNavigate } from 'react-router-dom';
  import { CryptoState } from './CryptoContext';
  
  const Header = () => {
    const navigate = useNavigate();
    const { currency, setCurrency } = CryptoState();
  
    const goToHome = () => {
      navigate('/'); // 直接传入路径，无需push方法
    };
  
    return (
      <div>
        <button onClick={goToHome}>返回主页</button>
        {/* 货币选择组件 */}
      </div>
    );
  };
  

• 路由配置错误
  确认主页的Route路径设置为/，且处于Routes组件内部：

  // App.js里的路由部分
  <Routes>
    <Route path="/" element={<Home />} />
    {/* 其他路由示例 */}
    <Route path="/coin/:id" element={<CoinDetail />} />
  </Routes>
  

• 组件未被Router包裹
  确保所有使用useNavigate的组件都在BrowserRouter（或其他Router）内部，参考问题1中App.js的包裹结构。

内容的提问来源于stack exchange，提问作者user20386731