使用 React 钩子，如何更新对象数组中部分对象的状态

Question

如果我使用 React hooks 有以下状态：

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

上面的 semi 工作，但它只更新一个参数。使用上述状态将按以下方式更新（例如）

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

如何传播 [index] 并只更新我需要的部分？

一个。

Answer 1

只需要在添加更新的属性之前使用扩展语法复制旧用户即可：

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