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

Question

I'm trying to use the createContext and useContext features of ReactJS to create a notification icon that displays a number of notifications increasing by 1 each second (essentially trying to figure out how to pass a state between files/components), but am unable to get the value to transfer over.

The timer appears to be working fine and the seconds variable in the timer file is definitely increasing, it's just the secs in the NavBar that isn't updating correctly.

--- App File ---

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

---Timer File---

...
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>
    ...
    );
};

---Navigation Bar File---

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

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

I was expecting {secs} in the Navigation Bar file to update to be equal the value of the seconds value from the Timer, but instead it appears to remain null. Here is a screenshot of the interface: https://gyazo.com/d283360091c9d4ea8d9b2785419ad665 In this case the notification icon should have a badge with the number 10.

Answer 1

Context values are only accessible if they are rendered within the hierarchy ie

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

NavBar doesn't appear to be a descendant of your context, your context is created inside Timer and therefore is only accessible from descendants of that component eg

<Timer>
  <NavBar />
</Timer>

Update

As per the comments discussion, if you simply want to share data between a couple of siblings, it would probably make more sense to just move the common up to the parent ( App ) and then pass the data into the siblings as props - see example .