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

Question

I want to update David and Brian's age to 25 using useState but I encounter an error:

TypeError: employees.map is not a function.

Can anyone suggest what should I do?

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;

Answer 1

The main problem is you are using in setEmployees() an object {} instead of an [] . The function .map() can be used only on arrays. From the documentation:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

If you want to add a new element to that array you should use as:

setEmployees(prevState => [
   ...prevState,
   { name: 'New Guy', age: 25 }
]);

To update all the values you can use .map() as the following:

setEmployees(prevState => prevState.map(e => ({
   ...e,
   age: 25
});

See a live example below:

 const data = [ { name: 'David', age: 40 }, { name: 'Brian', age: 35 } ] const result = data.map(e => ({...e, age: 10})) console.log(result)