type usestate as array of objects in react typescript
to type a hook as an array of objects in react usestate, use generics on the hook, e.g. const [employees, setemployees] = usestate<{salary: number; name: string}[]>([])a state variable can be initialized to an empty array and only accept objects of the specified type.
import {usestate} from 'react';
const app = () => {
// 👇️ const employees: {salary: number;name: string;}[]
const [employees, setemployees] = usestate<{salary: number; name: string}[]>(
[],
);
return (
<div>
<button
onclick={() =>
setemployees(prevemployees => [
...prevemployees,
{salary: 100, name: 'bob'},
])
}
>
add employee
</button>
{employees.map((employee, index) => {
return (
<divkey={index}><h2>
salary: {employee.salary} / name: {employee.name}
</h2>div>
);
})}
</div>
);
};
we use generics to correctly type usestatethe hooks, while initializing the hooks with an empty array.
if we hadn't used generics, e.g.
usestate<{salary: number; name: string}[]>([])when entering the hook, the type of the state variable would benever[], in other words, an array that would never contain any elements.
we can also use type aliases or interfaces if usestatecalls to the hook become busy.
import {usestate} from 'react';
type employee = {
salary: number;
name: string;
};
const app = () => {
// 👇️ const employees: employee[]
const [employees, setemployees] = usestate<employee[]>([]);
return (
<div>
<button
onclick={() =>
setemployees(prevemployees => [
...prevemployees,
{salary: 100, name: 'bob'},
])
}
>
add employee
</button>
{employees.map((employee, index) => {
return (
<divkey={index}><h2>
salary: {employee.salary} / name: {employee.name}
</h2>div>
);
})}
</div>
);
};
exportdefaultapp;
we extract the object type into a type alias and use it employee[]as a typing usestatehook.
if we try to add a value of a different type to the state array, we will get a type checking error.
import {usestate} from 'react';
type employee = {
salary: number;
name: string;
};
const app = () => {
// 👇️ const employees: employee[]
const [employees, setemployees] = usestate<employee[]>([]);
// ⛔️ argument of type '(prevemployees: employee[]) => (string | employee)[]' is not assignable to parameter of type 'setstateaction'.
setemployees(prevemployees => [...prevemployees, 'hello world']);
return (
<div>
<button
onclick={() =>
setemployees(prevemployees => [
...prevemployees,
{salary: 100, name: 'bob'},
])
}
>
add employee
</button>
{employees.map((employee, index) => {
return (
<divkey={index}><h2>
salary: {employee.salary} / name: {employee.name}
</h2>div>
);
})}
</div>
);
};
exportdefaultapp;
this example shows how attempting to add a string to employee[]a state array of type can cause an error in the type checker.
for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.
article url：
related articles
publish date：2025/03/05 views：144 category：react
-
在 react 中处理 select 元素上的 onchange 事件： 在 select 元素上设置 onchange 属性。 将所选选项的值保存在状态变量中。 每次用户更改所选选项时，更新状态变量。 import {usestate} from react
publish date：2025/03/05 views：73 category：react
-
在 react 中从数组中为 select 生成 option 标签： 使用 map() 方法迭代数组。 在每次迭代中，返回一个选项元素。 将唯一的关键属性传递给每个选项元素。 const app = () = { const arr = [ { value
publish date：2025/03/05 views：97 category：react
-
在 react 中使用 onchange 修改文本区域的值： 将 onchange 属性添加到文本区域，将其设置为一个函数。 通过 usestate 钩子将文本区域的值存储在状态中。 每次用户在文本区域中键入时更新状
publish date：2025/03/05 views：165 category：react
-
在 react 中从父组件调用子函数： 将 child 组件包装在 forwardref 中。 在 child 中使用 useimperativehandle 钩子来为 child 添加一个函数。 使用 ref 从 parent 调用 child 的函数，例如 childref.current.
publish date：2025/03/05 views：95 category：react
-
在 react 的函数组件中使用 addeventlistener 方法： 在元素上设置 ref 属性。 使用 ref 上的当前属性来访问元素。 在 useeffect 挂钩中添加事件侦听器。 import {useref, useeffect} from react ; const app
publish date：2025/03/05 views：171 category：react
-
react-hooks/exhaustive-deps规则会在效果钩子中缺少依赖项时向我们发出警告。 要消除警告，请将函数或变量声明移到 useeffect 钩子内，记住每次渲染时更改的数组和对象或禁用规则。 这是警
publish date：2025/03/05 views：71 category：react
-
在 react 中设置带有内联样式的背景图片： 在 img 元素上设置 style 属性。 在样式对象中设置 backgroundcolor 属性。 例如， backgroundimage: 。 // ?️ import the image import m
publish date：2025/03/05 views：156 category：react
-
在 react 中将数据从子组件传递到父组件： 将函数作为 prop 传递给 child 组件。 调用 child 组件中的函数并将数据作为参数传递。 访问 parent 函数中的数据。 import {usestate} from react ; funct
publish date：2025/03/05 views：103 category：react
-
在 react 中通过单击文本来选择单选按钮： 为每个单选按钮添加一个标签元素。 每个标签的 htmlfor 属性应设置为每个单选按钮的 id。 单击标签元素以选择单选按钮。 import react , {usesta
