如何在react钩子中使用useState添加/更新数组部门

Question

我有一个问题，我试图在选择一个项目后添加/更新数据对象。

代码如下:

const [roomDept, setDept] = useState([{ code: null, dept: null }]);
const [department, setDepartment] = useState([]);
const appendRoomDpt = () => {
setRoomDept(array => [...array, { code: null, dept: null }]);
}
return (
<div>
<ButtonGroup>
<IconButton icon={<Icon icon="plus" />} onClick={() => appendRoomDept()} />
</ButtonGroup>
roomDept.map((item, index) => (
<div key={index} className="flex">
<div className="flex-1 pb-2">
<SelectPicker
placeholder={"Select Room"}
data={room['data']}
labelKey="name"
valueKey="code"
style={{ width: '120px' }}
cleanable={false}
disabledItemValues={roomDept.map(x => x.code)}
onChange={(value) => {
const id = room['data'].filter(x => x.code === value).map(x => x.id);
(function getDepartment() {
useDepartments.getAll({ room: id, length: 9999 }).then(response => {
//Here's what I'm trying to do
let dept = [...department];
dept[index] = response['data']['data']
setDepartment(department);
console.log(department)
});
})()
}}
value={roomDept[index].code}
/>
</div>
</div>
))
</div>
)

假设roomDept我点击按钮add.然后有两个选择。之后，当我尝试在第一个选择字段上选择时，它将追加到部门，但当我尝试在第二个字段上选择时，它只会替换而不是添加。例如

我选择第一个选择字段。输出如下所示:

[{code: 'r1', name: 'room 1'}]

然后当我尝试在第二个select字段上选择时输出只是替换它

[{code: 'r2', name: 'room2'}]

它会在原来的位置加上

[{code: 'r1', name: 'room 1'},{code: 'r2', name: 'room2'}]

在更新端，它应该基于索引更新，它不会添加/追加。

Answer 1

始终记住这三行来更新存储数组的状态

中断对象以创建一个新对象。用新值更新新对象。

它是这样的:

let newObj = { ...state }
newObj.keyToBeUpdated = updatedArray
setState(newObj)

。

Answer 2

既然你试图基本上更新状态，你可以只是连接原来的状态数组与新的一个点击?类似以下语句:

const appendRoomDpt = (array) => {
setRoomDept( [...roomDept,...array]);
}