ReactJS 中的 setElement函数有什么用？

在 ReactJS 中，我们有一个 useState Hook，这个钩子用于在函数内部声明一个状态变量。需要注意的是，useState() 的一次使用只能用于声明一个状态变量。

方法：

创建一个 React 应用程序来设置开发环境。
声明一个 useState Hook。
使用 setElement函数设置元素的值。

注意：请参考 ReactJS 设置文章来设置开发环境。

设置开发环境：

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

npx create-react-app foldername

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

cd foldername

注意：在创建的文件夹中，转到src文件夹并删除 App.test.js、logo.svg 和 setupTests.js，因为这些文件在这个项目中不是必需的，我们的文件夹名称是state 。

项目结构：如下所示。

项目结构

句法：

这个 useState Hook 声明如下：

const [ element , setElement ] = useState(initial_state);

useState() 返回的值由一个包含两个值的数组组成。第一个值被称为状态变量，第二个被称为改变状态变量状态的函数，这个函数被命名为setElement 。

此 setElement函数用于更改第一个变量的状态或值。

示例：使用 setElement函数更改元素的状态。

在App.js中编写下面给出的代码。

Javascript

import React, { useState } from 'react'
function App() {
  const [element, setElement] = useState(0);
  
  function onClickButtonHandler() {
    setElement(element+1);
  }
  return (
    
      GeeksforGeeks
        
Add = {element}
  
      
    
  )
}
  
export default App;

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

npm start

输出：

注意：请参阅 React Hook 文章以获得更好的理解。