如何使用useState更新数组中对象的值？

【问题标题】：How to update value in an object in an array using useState?如何使用useState更新数组中对象的值？
【发布时间】：2020-09-14 18:06:40
【问题描述】：

我想使用 useState 将 David 和 Brian 的年龄更新为 25 岁，但遇到错误：

TypeError：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;

【问题讨论】：

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

主要问题是您在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)

【讨论】：