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）并将其传递到兄弟姐妹作为道具-参见example。

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

1 个答案: