react-brasil / forum

:beer: Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) pra issues
MIT License
30 stars 0 forks source link

Como atualizar setState dentro de uma função assincrona #6

Open dnokaneda opened 5 years ago

dnokaneda commented 5 years ago

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>
    );        
}

`