如何在 ReactJS 中更新组件的状态？

State 是 React 组件的一个实例，可以定义为一组可观察属性的对象，这些属性控制组件的行为。换句话说，组件的状态是一个对象，它包含一些可能在组件的生命周期内发生变化的信息。组件的状态可以在生命周期内更新。

通常，React 中有两种类型的组件。基于类的组件和功能组件。在这两种类型的组件中，我们更新组件状态的方法是不同的。我们将一一学习。

创建反应应用程序：

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

npx create-react-app name_of_the_app

第 2 步：创建反应应用程序后，使用以下命令根据您的应用程序名称移动到目录：

cd name_of_the_app

项目结构：现在在编辑器中打开您的应用程序文件夹。您将看到以下文件结构：

1. 更新基于类的组件的状态：现在我们将学习如何更新基于类的组件的状态。下面讨论这些步骤。

• 进入 App.js 文件并清除所有内容。
• 在 App.js 文件的顶部导入 React,{Component} from 'react ' 。
• 创建一个名为“App”的基于类的组件。这是我们重构的默认 App 组件。
• 使用 this.state 创建一个名为 text 的状态对象 句法。给它一个值。
• 在类中创建另一个方法并使用 'this.setState()' 方法更新组件的状态。
• 在 JSX 元素中传递状态对象并调用该方法来更新特定事件（如按钮单击）的状态。

例子 ：

文件名：App.js

Javascript

// The App.js file
import React,{Component} from 'react';
 
class App extends Component {
  constructor(){
    super()
    this.state={
      text : 'Welcome to Geeksforgeeks'
    }
  }
 
  goPremium(){
    this.setState({
      text:'Subscription successful'
    })
  }
  render() {
      return (
          

            
{this.state.text}
             this.goPremium()}>
              Go Premium
            
          
      ); 
  }
}
 
export default App;

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

npm start

输出：

2.更新功能组件的状态：更新功能组件的状态的步骤如下。

• 清除 App.js 文件的 App 组件内的所有内容。
• 在 App.js 文件的顶部导入 React, {useState} from “react” 。
• 在 App 组件内部，使用以下语法创建一个名为“text”的状态。这是 react 功能组件的内置 useState 方法。 ：

const [state, setState] = useState({text:'Default value of the text state'});

• 使用 '{state.text}' 方法将 'text' 状态传递给 JSX 元素。
• 使用“setState”方法更新特定事件的状态，例如按钮单击。语法如下：

setState({text:'Updated Content'})

例子：

文件名：App.js

Javascript

// App.js file
import React, {useState} from "react";
  
function App(){
    const [state, setState] = useState({
      text:'Welcome to Geeksforgeeks'
    });
    return (
        

            
{state.text}
             setState({
              text:'Subscription successful'
              })}>
             Go Premium
            
        
    );
};
 
export default App;

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

npm start

输出：