Skip to content

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

@dnokaneda

Description

@dnokaneda

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

`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions