Tengo un problema, intento agregar/actualizar el objeto de datos después de seleccionar un elemento.
aquí está el código:
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> ) suponiendo que roomDept hago clic en el botón Agregar. entonces hay una selección de dos. después de eso, cuando intente seleccionar en el primer campo de selección, se agregará al departamento, pero cuando intente seleccionar en el segundo campo, simplemente reemplazará en lugar de agregar. por ejemplo
Selecciono en el primer campo de selección. la salida es así.
[{code: 'r1', name: 'room 1'}]
luego, cuando trato de seleccionar en el segundo campo de selección, la salida simplemente lo reemplaza
[{code: 'r2', name: 'room2'}]
en su lugar, agregará, donde debería ser así.
[{code: 'r1', name: 'room 1'},{code: 'r2', name: 'room2'}]
en el lado de la actualización, debe actualizarse en base al índice y no se agregará/agregará.
Recuerde siempre estas tres líneas para actualizar un estado que almacena una matriz
Rompe el objeto para crear uno nuevo. Actualice ese nuevo objeto con el nuevo valor. setState con ese nuevo objeto.
Va así:
let newObj = { ...state } newObj.keyToBeUpdated = updatedArray setState(newObj)Eso es todo.
Dado que está tratando de actualizar esencialmente el estado, ¿podría simplemente concatenar la matriz de estado original con la nueva al hacer clic? Algo del estilo de:
const appendRoomDpt = (array) => { setRoomDept( [...roomDept,...array]); }