¿Hay alguna manera de insertar o agregar más elementos para usarState Array usando una nueva matriz de cadenas? Puedo agregar solo una cadena usando la siguiente función. Intenté hacer un bucle en la matriz de cadenas y actualizarla, pero parece que solo actualiza inicialList.list cuando está el último elemento. Necesito que todos los elementos de la matriz de cadenas se envíen a initialList.list
const [initialList, setinitialList] = useState({ listName: "List 1", list: ['One', 'Two', 'Three'] });
let multiElements:string[] = ['Four', 'Five', 'Six']
multiElements.forEach(e => {
setinitialList({
listName: initialList.listName,
list: [...initialList.list, e]
})
})
------------------------------------
Aunque podrías usar una devolución de llamada para el configurador:
setinitialList(initialList => ({
Tendría más sentido combinar las matrices con concat, solo una vez, en lugar de llamar al definidor de estado tantas veces sincrónicamente:
setinitialList({
...initialList,
list: initialList.list.concat(multiElements)
});
Personalmente, también recomendaríaggest separar los estados: después de todo, estos utilizan ganchos, no estados de clase:
const [list, setList] = useState(['One', 'Two', 'Three']);
const [listName, setListName] = useState("List 1");
Entonces tendrás que hacerlo
setList(list.concat(multiElements);
------------------------------------
Si desea tener acceso al estado anterior, deberá pasarle una función que tome el valor anterior como parámetro. Consulte los documentos de la API de React Hooks.
const [initialList, setInitialList] = useState({
listName: 'List 1',
list: ['One', 'Two', 'Three'],
});
// You don't need to type the variable here - TypeScript can infer it
const multiElements: string[] = ['Four', 'Five', 'Six'];
setInitialList((prevState) => ({
listName: initialList.listName,
list: [...prevState.list, ...multiElements],
}));
La clave aquí es difundir el estado anterior y también difundir los elementos múltiples que desea agregar a la matriz.