小白学react之Next.js 14(三)React.useState

首先,你需要确保引入了 ReactuseState

javascript 复制代码
import React, { useState } from 'react';

然后我们来定义:

javascript 复制代码
const App = () => {const [data, setData] = React.useState<Array<Employee>>([]);
    const [editID, setEditID] = React.useState<number | null>(null);
}

const [data, setData] = React.useState<Array<Employee>>([]);声明了一个状态变量 data,这个状态变量的类型是一个 Employee 对象的数组。更新这个状态的函数 setdata。data的初始值为一个空的Employee数组。

const [editID, setEditID] = React.useState<number | null>(null);声明了一个状态变量 editID,这个状态变量的类型是一个number 。更新这个状态的函数 setEditID。editID的初始值是null。

我们把它定义在app中,这样,整个app都能使用useState定义的变量,而且可以在app的任何地方使用setEditID和setData更改data和editID的值。

注意:useState 创建的状态仅在组件实例中存在。所以,当你重新加载页面,或者卸载并重新挂载组件时,状态会重置为初始值。

相关推荐
Myli_ing30 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue