如何在不刷新网页的情况下实时显示数据库中的值？

在本文中，我们将了解如何在不刷新网页的情况下显示数据库中的值。假设在我们的网络应用程序中，单击该按钮后，我们有一个按钮，一个函数被触发并从数据库中获取数据。或者在 React Web 应用程序中，我们可以使用每次打开页面时自动获取数据的钩子，例如我们可以使用 React 中的 Effect 钩子。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app app-name 

• 第 2 步：创建项目文件夹（即 my-app）后，使用以下命令移动到该文件夹：

cd app-name

项目结构：它看起来像这样。

使用 useEffect 挂钩：如何在组件挂载时获取数据，如何在状态更改或道具更改时运行代码，如何设置计时器或间隔。 useEffect 在每次渲染后运行（默认情况下），并且可以选择在再次运行之前自行清理。所以使用这个钩子，我们可以实时显示数据库中的值，而无需重新加载网页。

语法：以下是 useEffect 钩子的语法：

useEffect(() => {
    // Your code
}, []) // Dependency-array

通过 API 从数据库中获取数据：假设我们有一个从数据库连接的 API，这里我们使用提供虚拟数据的随机 API。单击 handleFetchData函数后，将获取数据，您可以在控制台中看到它。

const handleFetchData = async (e) => {
  // Put the endpoint of Api
  fetch('API_URL_ENDPOINT')
    .then((resp) => resp.json())
    .then((data) => console.log(data))
    .catch((e) => console.log(e));
};

实现：在相应的文件中写下以下代码。

App.js

import { useEffect, useState } from 'react';
  
function App() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // API to fetch some dummy data
    fetch('https://reqres.in/api/users?page=2')
      .then((resp) => resp.json())
      .then((apiData) => {
        setData(apiData.data);
      });
  }, []); // Dependency-array
  
  const style = {
    padding: '5px',
    display: 'block',
    color: 'green',
    border: '1px solid black',
  };
  
  return (
    

      
This is React WebApp 
      
Display values from database without reloading...
  
      {data.map((item) => {
        return (
          
            {item.email}
          
        );
      })}
    
  );
}
  
export default App;

运行应用程序的步骤：运行以下命令启动应用程序：

npm start

输出：

注意： useEffect 挂钩将自动运行代码以获取数据，因此您不必一次又一次地重新加载页面。