我无法立即获取更新的 internalStorage 值以在 Reactjs 中更新我的购物车通知

如何解决我无法立即获取更新的 internalStorage 值以在 Reactjs 中更新我的购物车通知

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

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

解决方法

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

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

一种基本上保留你所拥有的一切的“hacky”方式是这样的：

向要渲染的组件添加一个状态和一个 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 何时重新渲染，并且有更好的内置方法来执行此操作...