如何在不刷新网页的情况下实时显示数据库中的值?
在本文中,我们将了解如何在不刷新网页的情况下显示数据库中的值。假设在我们的网络应用程序中,单击该按钮后,我们有一个按钮,一个函数被触发并从数据库中获取数据。或者在 React Web 应用程序中,我们可以使用每次打开页面时自动获取数据的钩子,例如我们可以使用 React 中的 Effect 钩子。
创建反应应用程序:
- 第 1 步:使用以下命令创建一个 React 应用程序:
- 第 2 步:创建项目文件夹(即 my-app)后,使用以下命令移动到该文件夹:
项目结构:它看起来像这样。
使用 useEffect 挂钩:如何在组件挂载时获取数据,如何在状态更改或道具更改时运行代码,如何设置计时器或间隔。 useEffect 在每次渲染后运行(默认情况下),并且可以选择在再次运行之前自行清理。所以使用这个钩子,我们可以实时显示数据库中的值,而无需重新加载网页。
语法:以下是 useEffect 钩子的语法:
通过 API 从数据库中获取数据:假设我们有一个从数据库连接的 API,这里我们使用提供虚拟数据的随机 API。单击 handleFetchData函数后,将获取数据,您可以在控制台中看到它。
实现:在相应的文件中写下以下代码。
App.js
运行应用程序的步骤:运行以下命令启动应用程序:
输出:
注意: useEffect 挂钩将自动运行代码以获取数据,因此您不必一次又一次地重新加载页面。