Использование React-хуков, как обновить состояние части объекта в массиве объектов

Question

Если у меня есть следующее состояние с использованием перехватчиков React:

const [users, setUsers] = useState([
        {
            user: "Bob",
            cost: 25,
        },
{
            user: "Paul",
            cost: 30,
        },
    ])

Я могу отобразить это состояние следующим образом:

{users.map((user, index) => (
                                <div key={index}>
                                        <input
                                            type="text"
                                            value={user.user}
                                            name="user"
                                            onChange={handleFoo(index)}
                                        />
                                        <input
                                            type="number"
                                            value={user.cost}
                                            name="cost"
                                            onChange={handleFoo(index)}
                                        />


                                </div>
                            ))}

И все же я пытаюсь обновить состояние, когда только один ввод редактируется.

const handleFoo = index => e => {
        const { name, value } = e.target
        let newArr = [...users]
        newArr[index] = {[name]: value }
        setUsers(newArr)
    }

Вышеприведенная полуработа работает, но обновляет только один параметр. Используя вышеупомянутое состояние, будет обновлено как показано ниже (например)

[
        {
            user: "Bob",
            cost: 25,
        },
{
            cost: 30,
        },
    ]

Как я могу распространить [index] и обновить только нужный мне раздел?

A.

Answer 1

Просто нужно использовать синтаксис распространения для копирования старого пользователя перед добавлением обновленного свойства:

newArr[index] = {
 ...users[index],
 [name]: value 
}