reactjs - React Typescript - Agregue más elementos de una matriz de cadenas para usar la matriz State

CorePress2024-01-16  7

¿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.

Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare