javascript - 如何使用useState更新数组中对象的值?
问题描述
我想将 David 和 Brian 的年龄更新为 25 岁,useState
但遇到错误:
类型错误:employees.map 不是函数。
谁能建议我该怎么做?
import React, { useState, useEffect } from 'react';
function App() {
const [employees, setEmployees] = useState([]);
useEffect(() => {
setEmployees([
{ name: 'David', age: 40 },
{ name: 'Brian', age: 35 }
]);
}, []);
employees.map((value) => {
setEmployees({ ...employees, age: 25 });
});
console.log(employees)
return (
<div>
This is App component
</div>
);
};
export default App;
解决方案
主要问题是您使用的setEmployees()
是对象{}
而不是[]
. 该函数.map()
只能用于数组。从文档中:
该
map()
方法创建一个新数组,其中填充了对调用数组中的每个元素调用提供的函数的结果。
如果要向该数组添加新元素,则应用作:
setEmployees(prevState => [
...prevState,
{ name: 'New Guy', age: 25 }
]);
要更新所有值,您可以使用.map()
如下:
setEmployees(prevState => prevState.map(e => ({
...e,
age: 25
});
请参阅下面的实时示例:
const data = [
{ name: 'David', age: 40 },
{ name: 'Brian', age: 35 }
]
const result = data.map(e => ({...e, age: 10}))
console.log(result)
推荐阅读
- java - 使用 JOOQ 插入可更新记录时如何忽略重复键错误
- swift - 在 tableviewcell 中执行segue 不起作用
- java - JAVA:反转字符串时删除分隔符
- javascript - 单击添加按钮时显示 React 组件
- java - 404 错误 - 在 Google 云平台 vm 中运行已部署的 Java 时
- neo4j - 如果存在或不存在,列表中的 neo4j 匹配
- python - 通过 HTTPS 使用代理的 Python 请求因代理错误而失败
- flutter - Dart:不覆盖泛型方法具有类似于返回类型的泛型参数类型
- r - ggplot2。如何使 geom_bar 堆积图 y 范围 0-100%?
- html - 如何使用带有上下文的 Material UI 的 Input API 的错误道具和 css