Question

当localStorage myCart数组中有任何更改时，如何立即更新购物车页面数据？这是我的下面的代码

const [cart, setCart] = React.useState([])

React.useEffect(() => {
    setCart(JSON.parse(localStorage.getItem('myCart')) || [])
}, [])

页面重新加载时cart会更新，但新项目添加或更新任何现有项目时不会更新！{p>

如何实现这一目标，如果对“ localStorage”进行任何更改，cart会立即更新吗？

谢谢。

Answer 1

您可以将eventlistener添加到localstorage事件

React.useEffect(() => {
    
window.addEventListener('storage', () => {
  // When local storage changes, dump the list to
  // the console.
   setCart(JSON.parse(localStorage.getItem('myCart')) || [])   
});

   
}, [])

当存储区域出现时，会触发Window界面的存储事件（localStorage）已被修改。只有在非其本身的窗口进行更改时，才会触发存储事件。

。

Answer 2

我认为这是处理这种情况的更好方法。我就是这样处理这种情况的。

在您的组件中，

const [cart, setCart] = useState([]);

React.useEffect(() => {
    async function init() {
      const data = await localStorage.getItem('myCart'); 
      setCart(JSON.parse(data));
    }
    init();
}, [])

重新加载页面时，购物车会更新，但添加新商品时不会更新或更新任何现有项目！

我该如何实现，如果有任何更改，购物车会立即更新进入“ localStorage”？

添加项目时，假设您有一个方法addItem()

async function addItem(item) {
  // Do not update local-storage, instead update state
  await setState(cart => cart.push(item));
}

现在添加另一个useEffect();

useEffect(() => {
 localstorage.setItem('myCart', cart);
}, [cart])

现在，当购物车状态更改时，它将保存到本地存储

addEventListener存储不是一件好事。每次更改存储时，在您的代码中，您都必须先获取getItems并将其解析，这需要花费几毫秒的时间才能完成，这会导致UI更新变慢。

在做出反应

首先从localstorage / database加载数据并初始化状态。
然后根据需要更新代码中的状态。
然后侦听状态更改以执行任何任务（在这种情况下，保存到localstorage）

如果您的addItem()函数是上述组件（购物车组件）的子组件，那么您可以将setItem函数作为prop传递，或者可以使用contex API或使用Redux

更新

如果addCart是另一个组件

如果具有addCart功能的组件是cart组件的子组件，请使用props-https://reactjs.org/docs/components-and-props.html
如果具有addCart功能的组件不是cart组件的子组件，请使用上下文api在组件之间进行通信-https://reactjs.org/docs/context.html
如果您想以更好的方式管理数据，请使用https://redux.js.org/

根据用例，假设您的addItem函数在Product组件中声明。.

我建议您使用Redux来处理这种情况。

更新

正如@Matt Morgan在评论部分中所述，使用上下文API更适合这种情况。

但是，如果您的应用程序很大（我假设您正在构建一个电子商务系统），则最好使用像Redux这样的状态管理系统。仅在这种情况下，上下文API就足够了

在React.js中对localStorage进行任何更改时如何立即更新状态

2 个答案: