Como atualizar setState dentro de uma função assincrona
Olá, estou aprendendo React Native e estou tendo algumas dificuldades na atualização do setState e do bind. Bom, meu problema é o seguinte:
Vou fazer uma busca em um WebService SOAP e preciso atualizar a lista de itens na tela. Até o momento, se eu der console.log na Array interna da função de enviaRequest, eu consigo visualizar todos os dados, mas não consigo atualizar no setState criado no constructor da página.
Não sei se é o correto, colocar no próprio botão de Input no evento onSubmitEditing o envio da função que fiz para a request. Vi alguns tutoriais criando uma função só para atualizar o setState recebendo o retorno de outra função, mas mesmo assim não consegui fazer.
Vou colocar o código anexado. envia.txt
Espero que me ajudem.
Obrigado.
`
constructor(props) {
super(props);
this.state = { text: '' };
this.state = { itens: [] };
Loading.load( () => this.setState({ text: 'Pesquisar Itens', loaded: true }) );
}
clearInput = () => {
this.setState({ text: '' })
}
enviaRequest = () => {
let xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', webServiceURL, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
// array de saída
let objs = [];
let DOMParser = require('xmldom').DOMParser;
let doc = new DOMParser().parseFromString(xmlhttp.response, 'text/xml');
// recebe valores do xml acima
let ID = doc.getElementsByTagName('ID');
let ITEM = doc.getElementsByTagName('ITEM');
for (var i=0; i < ID.length; i++) {
// atualiza array de saída
objs.push({
id: ID[i].textContent,
item: ITEM[i].textContent,
})
}
// atualiza state (com erro)
this.setState({ itens: objs });
}
}
}
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send(soapMessage);
}
render() {
return (
<Fragment>
{ this.state.loaded ?
<View style={CSS.ContainerApp}>
<TextInput {...this.props}
returnKeyType="search"
onSubmitEditing={ () => this.enviaRequest() }
/>
<View>
<ScrollView>
{
this.state.itens.map(item => ( <Text key={item.id}>{ item.item }</Text> ))
}
</ScrollView>
</View>
</View>
}
</Fragment>
);
}
`