React 上下文不会在某些地方更新

Question

单击按钮时，我正在将产品信息添加到本地存储并将其设置为上下文。

我在两个地方使用上下文 - header 和产品页面，语法几乎相同。 header 中有一个 console.log，每当我与上下文交互时，它会立即触发，确认上下文工作正常。但是，当我进入产品页面时，我需要重新加载一次才能获取数据。这是为什么？

上下文文件

import React, { useState, useEffect } from "react";

export const LikedContext = React.createContext([{}, () => {}]);

export const LikedProvider = (props) => {
  const [liked, setLiked] = useState(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      let likedData = localStorage.getItem("liked");

      likedData = likedData ? JSON.parse(likedData) : "";
      setLiked(likedData);
    }
  }, []);

  return (
    <LikedContext.Provider value={[liked, setLiked]}>
      {props.children}
    </LikedContext.Provider>
  );
};

Header


export const LikedProductsIcon = () => {
  const [liked, setLiked] = useContext(LikedContext);
  console.log("liked header", liked);

  const likedCount =
    null !== liked && Object.keys(liked).length ? liked.totalProductsCount : "";
  const totalPrice =
    null !== liked && Object.keys(liked).length ? liked.totalProductsPrice : "";

  return (
    <>
      <CartContainer to="/pamegti-produktai">
        <CountCircle>
          <HeartSvg />
          {likedCount ? <span>{likedCount}</span> : ""}
        </CountCircle>
      </CartContainer>
    </>
  );
};

喜欢的产品页面

const LikedProducts = () => {
  const [liked, setLiked] = useContext(LikedContext);

  console.log("liked page", liked);

  return (
    <Layout>
      <Container>
        {liked ? (
          liked.products.map((product, index) => (
            <ProductsCard product={product} blackText />
          ))
        ) : (
          <div>Pamėgtų produktų nėra.</div>
        )}
      </Container>
    </Layout>
  );
};

Answer 1

如果渲染多个<LikedProviders>，那么它们将各自有自己独立的状态。在其中一个中设置状态不会影响另一个。当您刷新页面时它们同步的原因是它们都从本地存储加载并看到相同的值。但这只会在加载时发生，之后它们将不同步。

如果你想要共享状态，那么你只想渲染其中之一。将它放在组件树的顶部（app.js 是个好地方）以便所有需要它的组件都可以访问它，然后删除另一个。

React 上下文不会在某些地方更新

React context not updating on certain places

javascript

reactjs

jsx

use-state

use-context