reactjs - React 中的即时实时通知
问题描述
我目前正在开发基于 MERN 堆栈的 React 应用程序,并且我有一个用例,我想在应用程序中实现即时通知。
例如,我有一个购物车,其中的商品被添加到localstorage
用户“”时,并在用户需要查看时adds to the cart
从该购物车中获取并显示给用户。localstorage
我需要实现的是,显示一个包含购物车中物品数量的徽章(如图所示)。
根据我的研究,我发现不可能在同一个选项卡中观看和触发与本地存储相关的事件,这意味着这不是理想的解决方案。用户添加到购物车后,我需要立即更新徽章。
对于这个用例,我的最佳选择是什么?有没有一种方便的方法可以在 React 中实现实时通知?
(请注意,此徽章位于作为单独组件的标题上,而“ add to cart
”位于另一个组件中。)
解决方案
您可以使用以下任何一种:利用 useState Hook 或使用基于类的组件的功能组件。在这个例子中,我利用一个包'local-storage'来获取本地存储中保存的项目。
import React, {useState} from 'react';
import ls from 'local-storage';
const Cart = () => {
const [numberOfCart, setNumberOfCart] = useState(0);
setNumberOfCart(ls.get('cart').length);
return (
<div>
<span>{numberOfCart}</span>
</div>
)
}
class Cart extends React.Component {
constructor() {
super();
this.state = {
numberOfCart: 0
}
}
componentDidMount() {
this.setState({ numberOfCart: ls('get').length })
}
render() {
return (
<div>
<span>{this.state.numberOfCart}</span>
</div>
);
}
}
推荐阅读
- r - 让 R 打印一个 Stata 命令
- python - FPDF Emoji Star 问题
- wcf - System.Security.Cryptography.CryptographicException:使用配置的 WCF 客户端证书身份验证指定的提供程序类型无效
- c# - 如果它们以任何方式交叉,则比较两个 DateTime .TimeOfDay。ASP C#
- sqlalchemy - SQLAlchemy:根据列值有条件地在表中创建关系
- .htaccess - 如何在不禁止访问其文件的情况下使用 htaccess 禁用对文件夹的访问?
- javascript - 在 Javascript 中解析 Promise 数组
- linux - 将系统上所有 git 存储库的远程从 http 更改为 ssh
- java - Android Volley 为什么 JsonObjectRequest 不调用 onResponse
- powerbi - Power BI 中的条件转换数据