当导入ReactJS时，为什么useContext不更新我的值？

Question

我正在尝试使用ReactJS的createContext和useContext功能来创建一个通知图标，该图标显示每秒以1递增的通知数量（本质上是试图弄清楚如何在文件/组件之间传递状态），但是无法获得转移的价值。

计时器似乎工作正常，并且计时器文件中的seconds变量肯定在增加，只是NavBar中的秒数未正确更新。

-应用文件-

function App() {
  return (
    <div>
      <NavBar />
      <Timer />
    </div>
  );
}
export default App;

-计时器文件-

...
export const secContext = createContext()
const Timer = () => {
    const [seconds, setSeconds] = useState(0);
    ...
    useEffect(() => {
        ...
        if (isActive) {
            interval = setInterval(() => {
            setSeconds(seconds => seconds + 1);
        }, 1000);}
        ...

return (
    ...
        <secContext.Provider value={seconds}>
        <div className="time">
            {seconds}s
        </div>
        ...
        </secContext.Provider>
    ...
    );
};

---导航栏文件---

...
import {secContext} from './Timer'
export default function NavBar() {
  const secs = useContext(secContext)

  return (
          ...
          <Badge badgeContent={secs}>
            <NotificationsIcon />
          </Badge>
          ...
   );
}

我期望导航栏文件中的{secs}更新为等于Timer的秒值，但是它似乎保持为空。 以下是界面的屏幕截图： https : //gyazo.com/d283360091c9d4ea8d9b2785419ad665在这种情况下，通知图标应带有带有数字10的徽章。

Answer 1

如果上下文值在层次结构中呈现，则只能访问它们

<secContext.Provider value={x}>
  <NavBar />
</secContext.Provider>

NavBar似乎不是您上下文的后代，您的上下文是在Timer内部创建的，因此只能从该组件的后代访问，例如

<Timer>
  <NavBar />
</Timer>

更新资料

按照意见的讨论，如果你只是想几个兄弟姐妹之间共享数据，它可能会更有意义，只要将共同到父（ App ），然后将数据传递到兄弟姐妹的道具-见例子 。