setState() 方法是异步的吗？

如果您使用的是 ReactJs，那么您肯定会遇到一些与异步 setState 方法相关的错误。在本文中，我们将了解为什么 setState 是异步的，并向您展示与它相关的一些问题以及如何修复此错误并使您的代码按预期工作。

创建反应应用程序：

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

npx create-react-app gfg

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

cd gfg

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

为什么 setState() 是异步的？

ReactJs 异步设置其状态，因为它可能导致昂贵的操作。使其同步可能会使浏览器无响应。异步 setState 调用被批处理以提供更好的用户体验和性能。

setState() async 问题：如果您使用 ReactJs，那么您可能熟悉 setState 方法。此函数用于更新组件的状态，但重要的是要记住 setState 是异步的。这可能会导致代码中出现棘手的调试问题。

示例 1：让我们在 App.js 文件中创建一个 Input 字段。

Javascript

import React from 'react';
  
class App extends React.Component {
  constructor() {
    super();
  
    this.state = {
      value: '',
    };
  }
  
  render() {
    return (
      

        
GeeksforGeeks
        

          
            Input Field:-
             {
                console.log('Initial value:- ', this.state.value);
                this.setState({ value: e.target.value });
                console.log('Final value:- ', this.state.value);
              }}
            />
          
        
      
    );
  }
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：这里可以看到初值和终值是一样的。

示例 2：好消息是有办法解决这个问题。一种选择是使用 async/await 或类似的构造。但是，这不适用于 setState。另一种选择是在 setState 中添加回调函数。下面是实现。

Javascript

import React from 'react';
  
class App extends React.Component {
  constructor() {
    super();
  
    this.state = {
      value: '',
    };
  }
  
  render() {
    return (
      

        
GeeksforGeeks
        

          
            Input Field:-
             {
                console.log('Initial value:- ', this.state.value);
                this.setState({ value: e.target.value }, () => {
                  console.log('Final value:- ', this.state.value);
                });
              }}
            />
          
        
      
    );
  }
}
  
export default App;

运行应用程序：使用以下代码运行应用程序

npm start

输出：