TransWikia.com

Como criar um array de objetos com o useState do React

Stack Overflow em Português Asked by Luan Luiz on December 30, 2021

Estou tentando fazer o seguinte procedimento no React Native, com o Expo:

Tenho alguns dados armazenados no AsyncStorage do dispositivo. O código abaixo me retorna o seguinte resultado:

CÓDIGO

AsyncStorage.getAllKeys((err, keys) => {
     AsyncStorage.multiGet(keys, (err, stores) => {
        console.log(stores);
     });
  });

RESULTADO

Array [
 Array [
  "webservice_qng7ike7r",
  "{"idWebservice":"qng7ike7r","enderecoWebservice":"Endereço 2","nomeWebservice":"Nome 2"}",
 ],
 Array [
  "webservice_t572op73v",
  "{"idWebservice":"t572op73v","enderecoWebservice":"Endereço 1","nomeWebservice":"Nome 1"}",
 ],
 Array [
  "webservice_u6alr9qo8",
  "{"idWebservice":"u6alr9qo8","enderecoWebservice":"Endereço 3","nomeWebservice":"Nome 3"}",
 ],
]

Para poder montar um objeto apropriado, contendo apenas as informações necessárias do Webservice, estou fazendo o seguinte procedimento:

AsyncStorage.getAllKeys((err, keys) => {

     AsyncStorage.multiGet(keys, (err, stores) => {

        for (let i = 0; i < stores.length; i++) {

           const webserviceCorrente = stores[i];
           const objWebservice = JSON.parse(webserviceCorrente[1]);

           const data = {
              idWebservice: objWebservice.idWebservice,
              nomeWebservice: objWebservice.nomeWebservice,
              enderecoWebservice: objWebservice.enderecoWebservice,
           }

           console.log(data);
        }
     });
  });

Até aí, tudo certo. Ele me retorna o objeto desta maneira abaixo:

Object {
 "enderecoWebservice": "Endereço 1",
 "idWebservice": "t572op73v",
 "nomeWebservice": "Nome 1",
}

O que eu quero, é montar um array onde cada índice dele é um objeto contendo esses dados, dos 3 endereços cadastrados.

Estou tentando fazer dessa forma, mas sem sucesso:

Declarando o State do array

const [arrWebservices, setArrWebservices] = useState([]);

Montando o array de objetos (sem sucesso)

AsyncStorage.getAllKeys((err, keys) => {

     AsyncStorage.multiGet(keys, (err, stores) => {

        for (let i = 0; i < stores.length; i++) {

           const webserviceCorrente = stores[i];
           const objWebservice = JSON.parse(webserviceCorrente[1]);

           const data = {
              idWebservice: objWebservice.idWebservice,
              nomeWebservice: objWebservice.nomeWebservice,
              enderecoWebservice: objWebservice.enderecoWebservice,
           }

           setArrWebservices({ ...arrWebservices, data });
        }
     });
  });

Alguém pode me ajudar, por favor? Eu pesquisei pela internet mas não consegui encontrar uma solução.

Se precisarem de mais alguma informação, me avisem.

Obrigado desde já!

One Answer

O que procuras é uma Array e não um Objeto. Como estás a fazer estás a criar um objeto único com 3 chaves (idWebservice, nomeWebservice, enderecoWebservice) que estão sempre a ser re-escritas. Deves usar [] e não {}.

Ou seja: setArrWebservices([ ...arrWebservices, data ]);

Para além disso podes usar o .map e chamar esse hook só uma vez (e não uma vez a cada iteração do loop).

Sugestão:

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (err, stores) => {
    const webServices = stores.map(store => {
      const objWebservice = JSON.parse(store[1]);
      return {
        idWebservice: objWebservice.idWebservice,
        nomeWebservice: objWebservice.nomeWebservice,
        enderecoWebservice: objWebservice.enderecoWebservice,
      }
    });
    
    setArrWebservices(webServices);
  });
});

Answered by Sergio on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP