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,
        },
    ]

如何传播[索引]并仅更新我需要的部分？

A。

Answer 1

在添加更新的属性之前，只需使用传播语法来复制旧用户：

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

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

1 个答案: