拆分context.js后App.js中h2组件无法动态渲染，求解决方案

问题根源 #

拆分Context到独立的context.js后，出现了两个完全无关的signedIn状态：

• App组件自己通过useState声明了一个signedIn，页面上的h2绑定的是这个状态
• context.js里的AppProvider内部也声明了另一个signedIn，按钮点击时修改的是这个Context里的状态

这俩状态完全独立，点击按钮只会改变Context内的状态，App组件自身的状态没变化，所以h2不会跟着更新。而之前没拆分时，Context提供的就是App组件自身的状态，修改后能同步更新h2。

解决方法 #

核心思路是：让所有用到signedIn的组件共享同一个状态源（也就是Context里的状态），不要在多个地方重复声明状态。

步骤1：移除App组件自身的状态 #

删掉App里的const [signedIn, setSignedIn] = useState(true);，因为Context已经在维护这个状态了。

步骤2：让h2所在的组件能获取到Context状态 #

由于useContext只能在Context Provider包裹的子组件中使用，我们可以把h2抽成一个子组件，在这个子组件里通过useContext获取状态：

修改后的App.js代码：

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

// 抽离状态显示组件，它在AppProvider内部，能拿到Context的状态
const AuthStatus = () => {
  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>
        <Nav />
        <AuthStatus />
      </AppProvider>
    </div>
  );
}

其他文件（Nav.js、Btn.js、context.js）保持不变即可。

这样修改后，按钮点击修改Context里的signedIn状态时，AuthStatus组件会感知到状态变化并重新渲染，h2就能动态更新了。

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