如何等待 ReactJS 组件完成更新？

为了等待 ReactJS 组件完成更新，我们通过组件的条件渲染在我们的 React 应用程序中使用加载状态。这可以通过在功能组件中使用 useState 和 useEffect 挂钩来实现。在状态的帮助下，我们确保最初它是假的，并且在更新完成后它变成了真的。这样条件渲染只会在更新完成后渲染组件。我们使用 useEffect 挂钩来检查更新状态并在第一次呈现应用程序时加载所有更新。

让我们看一个例子来演示这个概念。

创建反应应用程序：

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

npx create-react-app example

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

cd example

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

第 3 步：在 index.js 中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
reportWebVitals();

App.js

import React, { useEffect, useState } from "react";
import axios from "axios";
  
function App() {
  const [isLoading, setLoading] = useState(true); // Loading state
  const [pokemon, setPokemon] = useState(); // pokemon state
  
  useEffect(() => { // useEffect hook
  setTimeout(() => { // simulate a delay
  axios.get("https://pokeapi.co/api/v2/pokemon/1")
  .then((response) => {
  
      // Get pokemon data
      setPokemon(response.data); //set pokemon state
      setLoading(false); //set loading state
    });
   }, 3000);
  }, []);
  
  if (isLoading) {
    return (
    Loading the data {console.log("loading state")}
  );
  }
  
  return (
    
      {pokemon.name}
      
    
  );
}
  
export default App;

第 4 步：这里我们使用 Axios 库来获取 API 数据，我们需要使用根目录中的命令来安装它。

npm install axios

第 5 步：以“加载模式”启动您的组件。

我们将使用条件渲染和 useEffect 的概念来等待 ReactJS 组件完成更新。通过使用“正在加载”文本的条件渲染和使用 useState，我们实现了组件的“加载模式”状态。 useEffect 使用将在 DOM 更新后调用的函数。这样，isLoading 的时间为假，我们处于等待状态，以便在那个时候整个组件最终得到更新。 SetTimeout() 用于模拟加载中的延迟，以便我们观察加载状态。这样我们在应用程序中创建了一个加载状态。

应用程序.js

import React, { useEffect, useState } from "react";
import axios from "axios";
  
function App() {
  const [isLoading, setLoading] = useState(true); // Loading state
  const [pokemon, setPokemon] = useState(); // pokemon state
  
  useEffect(() => { // useEffect hook
  setTimeout(() => { // simulate a delay
  axios.get("https://pokeapi.co/api/v2/pokemon/1")
  .then((response) => {
  
      // Get pokemon data
      setPokemon(response.data); //set pokemon state
      setLoading(false); //set loading state
    });
   }, 3000);
  }, []);
  
  if (isLoading) {
    return (
    Loading the data {console.log("loading state")}
  );
  }
  
  return (
    
      {pokemon.name}
      
    
  );
}
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：当我们运行上面的代码时。

加载状态