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

Question

我有一个问题，我正在尝试在选择一个项目后添加/更新数据 object。

这是代码：

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我点击按钮添加。 然后有两个选择。 之后，当我尝试在第一个 select 字段上输入 select 时，部门将输入 append，但是当我在第二个字段上尝试输入 select 时，它只会替换而不是添加。 例如

我 select 在第一个 select 字段上。 output 是这样的。

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

然后当我在第二个 select 字段上尝试 select 时，output 只需替换它

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

相反，它会添加，它应该是这样的。

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

在更新方面，它应该根据索引进行更新，并且不会添加/追加。

Answer 1

永远记住这三行来更新一个存储数组的state

打破 object 来创建一个新的。 使用新值更新新的 object。 使用新的 object 设置状态。

它是这样的：

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

就是这样。

Answer 2

由于您正在尝试从本质上更新 state，您能否在单击时将原始 state 数组与新数组连接起来？ 类似的东西：

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