在数据库中更新数据后,如何在不重新加载页面中刷新React中的路由或组件?
我正在从数据库中更新数据,例如DELETE或更改为更新的数据。现在,需要重新加载页面以在当前组件中查看我的数据。我如何在没有重新加载网站的情况下查看我的更新数据。
i am update my data from database like delete or change to updated data. now page is need to reload to see my data in current component. how i can see my updated data without reload my website .
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可能正在寻找一种“推”机制。他们可以采用发布/订阅Websocket等发布/订阅技术的形式,或像,间隔轮询(对HTTP服务器的重复Web请求)。
根据您的框架,您可能会使用(“ WS”)从服务器发送信号。它们通常用于Web开发人员的“推动事件”,这是其工作原理的一个示例:
后端服务器将运行WS服务器
客户端的浏览器加载页面时将连接到WS,“订阅”
后端服务器“发布” /“ emits” /“ pushes”消息< / p>
eg
“ store_updated”
带有更新属性的对象,例如{“ apples”:2}
更新的属性这是取决于您是直接使用Websockets API还是更高级别的包装器。
有关一个想法,请参见在Mdn。
上
在您的情况下, sandbox demo 可能是服务的。
客户处理它们。在您的情况下,您的React组件将更新其本地状态或更高级别的组件将其置于儿童道具中供他们更新。
接下来,您继续进行下一步取决于您的后端技术:
You are likely looking for a "push" mechanism. They can take the form of publish/subscribe technologies like WebSockets, or ones that emulate them like Long polling, interval polling (repeated web requests to the HTTP server).
Depending on your framework, you'll likely be using WebSockets API ("WS") to send a signal from the server. They're often used for 'push events' by web developers, an example of how it works:
The backend server will run a WS server
The client's browser will connect to WS when they load their page, "subscribing"
The backend server "publishes" / "emits" / "pushes" messages
e.g.
"STORE_UPDATED"
with an object of updated properties, e.g.{"apples": 2}
of updated propertiesWhat this looks like depends on if you're using WebSockets API directly or a higher level wrapper.
For an idea see Writing WebSocket client applications on MDN.
In your case with React, react-use-websocket and its sandbox demo may be of service.
The client handles them. In your case, your react component would update its local state or a higher level component will place them into child props for them to be updated.
Where you proceed next depends on your backend technology: