Question

我无法在我的 React 应用程序中正确使用 Context。大多数文档都在使用基于类的组件，而我正在尝试使用功能组件来做到这一点。

错误指出 AppContext 未定义。

App.js 和 Header.js 在不同的文件中。

如果我在 console.log(React.useContext(AppContext)) 后立即添加 <AppContext.Provider value='AppName'> 会记录正确答案。但是，此处的 AppContext 中未定义 Header：

const app = useContext(AppContext);

这是代码的当前状态：

App.js

import React, { createContext } from 'react';
import Header from './Header';

const app = 'AppName';
const AppContext = createContext(app);

export default function App() {

    return (
        <AppContext.Provider value={ app }>
          {console.log(React.useContext(AppContext))} // returns 'AppName'
          <Header />
        </AppContext.Provider>
    );
}

Header.js

import React, { useContext } from 'react';

export default function Header() {
    const app = useContext(AppContext);
    console.log(app) // undefined because AppContext not defined
    return (
        <header>
            { app }
        </header>
    );
}

Answer 1

您可以将 React.createContext 移到组件主体之外，在提供者处传递上下文的值并使用 React.useContext 访问上下文的值。

const AppContext = React.createContext('CodeInABottle');

export default function App() {
  return (
    <div>
      <AppContext.Provider value="someValue">
        <Router>
          <Header />
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
          </Switch>
          <Footer />
        </Router>
      </AppContext.Provider>
    </div>
  );
}

export default function Header() {
  const someValueFromTheContext = React.useContext(AppContext);

  console.log(someValueFromTheContext); // 'someValue'
  return (
    <header>
      <Link to="/">{app}</Link>
    </header>
  );
}

这是一个有效的 StackBlitz

反应上下文未定义

1 个答案: