App.js 中的 h2 组件不会动态渲染。可能是什么问题？

Question

这些是我位于同一目录中的组件：

// App.js
import "./styles.css";
import React, { useState } from "react";
import Nav from "./Nav";
import { AppProvider } from "./context";

export default function App() {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <div className="App my-3">
      <AppProvider>
        <Nav />
        <h2 className="my-2">{signedIn ? "Signed In!" : "Signed Out!"}</h2>
      </AppProvider>
    </div>
  );
}


// Nav.js
import Btn from "./Btn";

const Nav = () => {
  return <Btn />;
};

export default Nav;


// Btn.js
import "bootstrap/dist/css/bootstrap.min.css";
import { useContext } from "react";
import { context } from "./context";

const Btn = () => {
  const [signedIn, setSignedIn] = useContext(context);
  const handleButtonClick = () => {
    setSignedIn((prevState) => !prevState);
  };

  return (
    <button className="btn btn-primary" onClick={handleButtonClick}>
      {signedIn ? "Signed In!" : "Signed Out!"}
    </button>
  );
};

export default Btn;


// context.js
import React, { useState } from "react";

const context = React.createContext();

const AppProvider = ({ children }) => {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <context.Provider value={[signedIn, setSignedIn]}>
      {children}
    </context.Provider>
  );
};

export { context, AppProvider };

仅当我尝试创建单独的 context.js 文件时才出现此问题。当代码如下时，它工作得很好：

// App.js
import "./styles.css";
import React, { useState } from "react";
import Nav from "./Nav";

export const context = React.createContext();

export default function App() {
  const [signedIn, setSignedIn] = useState(true);

  return (
    <div className="App my-3">
      <context.Provider value={[signedIn, setSignedIn]}>
        <Nav />
        <h2 className="my-2">{signedIn ? "Signed In!" : "Signed Out!"}</h2>
      </context.Provider>
    </div>
  );
}


// Btn.js
import "bootstrap/dist/css/bootstrap.min.css";
import { useContext } from "react";
import { context } from "./App";

const Btn = () => {
  const [signedIn, setSignedIn] = useContext(context);
  const handleButtonClick = () => {
    setSignedIn((prevState) => !prevState);
  };

  return (
    <button className="btn btn-primary" onClick={handleButtonClick}>
      {signedIn ? "Signed In!" : "Signed Out!"}
    </button>
  );
};

export default Btn;

你能帮我一下吗？我仍然是一个反应初学者，所以我不确定我应该做什么来克服这个错误。我尝试了几种方法，但似乎都不起作用

Answer 1

想要使用上下文中的值的组件必须明确表示他们想要它。您需要将

h2

包装在另一个函数组件中，并声明它要使用上下文，如下所示：

import React, { useContext } from "react";
import Btn from "./Btn.js";
import { AppProvider, context } from "./Context";

const H2 = () => {
  const [signedIn] = useContext(context);
  return <h2 className="my-2">{signedIn ? "Signed In!" : "Signed Out!"}</h2>;
};

export default function App() {
  return (
    <div className="App my-3">
      <AppProvider>
        <Btn />
        <H2 />
      </AppProvider>
    </div>
  );
}

演示：