如何使用useState更新數組中對象的值？

Question

我想使用useState將 David 和 Brian 的年齡更新為 25 歲，但遇到錯誤：

類型錯誤：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;

Answer 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)