我无法立即获得更新的internalStorage值来更新Reactjs中的购物车通知

Question

这是我的购物车图标，它是一个单独的购物车组件

<IconButton aria-label="cart">
<StyledBadge badgeContent={localStorage.getItem('count')} 
color="primary">
<ShoppingCartIcon style={IconStyling.styleListShopIcon} />
</StyledBadge>
</IconButton>

这是我发布新购物车项目时更新localStorage的代码

axios.post(`http://localhost:5000/cart`, CartData)
.then((result) => {
localStorage.setItem('count', result.data.length);
}).catch((error) => {
console.log(error)
})

Answer 1

React使用引用来检查是否发生了更改以触发更新。

通过使用localStorage，引用将始终相同，并且不会触发更新。

A"；"黑客"；基本上保留你所有东西的方法是这样的：

向要渲染的组件添加状态和forceRender函数：

const [render, setRender] = React.useState(0)
function forceRender(){
setRender(render + 1)
}

然后将forceRender添加到Axios提取：

axios.post(`http://localhost:5000/cart`, CartData)
.then((result) => {
localStorage.setItem('count', result.data.length);
forceRender();
}).catch((error) => {
console.log(error)
})

请注意，这将是你字面上告诉react何时重新发布，并且有更好的方法来实现这一内置。。。