React上下文在某些地方没有更新

Question

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

我在两个地方使用上下文——页眉和产品页，语法几乎相同。有一个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>
);
};

标题

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是一个不错的位置(，以便所有需要它的组件都可以访问它，然后删除另一个。