0

Preciso de ajuda para usar o .setState() no if else após o render(), isso se possível...

render() {
    const propsDesign = this.props.design, 
          propsIcon = this.props.icon,
          propsText = this.props.text,
          propsDescription = this.props.description;


    var object = {
        design: propsDesign,
        icon: propsIcon,
        text: propsText,
        description: propsDescription
    };

    if(propsDesign === 'normal' || propsDesign === 'narrator' || propsDesign === 'error' ) {
        console.log("Design true");
        this.setState({design: propsDesign});
    } else {
        console.log("Design false");
        this.setState({design: 'error'});
    }

    return <Container design=??? />;
}
3
  • Aqui é o Stackoverflow em Português, traduza sua pergunta por favor. Commented 12/11/2019 às 2:59
  • Nem percebi que estava no em português, mas está traduzido Commented 12/11/2019 às 3:01
  • Sem problemas, só pra manter a ordem ^^ Commented 12/11/2019 às 3:08

1 Resposta 1

3

Não use o setState dentro do render(), isso pode ocasionar loops infinitos, porque o metódo render é chamado quando o state é atualizado, então ao colocar o setState dentro do render, ele irá atualizar o state e chamar o render, atualizar o state novamente e chamar o render e por aí vai, o metódo render deve ser puro.

Se você precisa alterar o state use funções antes do render() e lifecycles do React.

E sim é possível usar o if com o setState, do jeito que você fez. Se você quer inicializar essas váriaveis assim que a página for montada, use o componentDidMount(). Exemplo:

componentDidMount() {
    const propsDesign = this.props.design, 
          propsIcon = this.props.icon,
          propsText = this.props.text,
          propsDescription = this.props.description;


    var object = {
        design: propsDesign,
        icon: propsIcon,
        text: propsText,
        description: propsDescription
    };

    if(propsDesign === 'normal' || propsDesign === 'narrator' || propsDesign === 'error' ) {
        console.log("Design true");
        this.setState({design: propsDesign});
    } else {
        console.log("Design false");
        this.setState({design: 'error'});
    }
}

render() {
    return <Container design={this.state.design} />;
}

Ref docs React Lifecycles: https://pt-br.reactjs.org/docs/state-and-lifecycle.html

Ref sobre setState() no render(): https://blog.logrocket.com/an-imperative-guide-to-setstate-in-react-b837ceaf8304/

1
  • Obrigado! Resolveu meu problema e me fez entender um pouco mais sobre o state. Commented 12/11/2019 às 3:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .