2

Preciso criar um componente para avaliação, onde é possível avaliar algo com 0-5 estrelas clicando nos ícones das estrelas. Mas da maneira que faço, estou excedendo a quantidade de this.setState() aninhados, o que gera erro pois pode causar um loop infinito.

Código do Componente:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Container } from './styles';

class StarsToRate extends Component {
  constructor(props) {
    super(props)
    const {
      size,
    } = this.props;
    this.state = {
      rating: 0,
      iconSize: size,
    }
  }

  render() {
    const { rating, iconSize } = this.state;
    return (
      <Container>
        {[1, 2, 3, 4, 5].map((element) => {
          if (element <= rating) {
            return <Icon name="star" size={iconSize} color="#EBC600" onPress={this.setState({ rating: element })} />;
          }
          return <Icon name="star-border" size={iconSize} color="#EBC600" onPress={this.setState({ rating: element })} />;
        })}
      </Container>
    );
  }
}

StarsToRate.defaultProps = {
  size: 24,
};

StarsToRate.propTypes = {
  size: PropTypes.number,
};

export default StarsToRate;

Erro exibido:

inserir a descrição da imagem aqui

2
  • O problema não é que tu tá chamando o setState sempre? Tenta alterar o onPress para: onPress={element => this.setState({rating: element})} Commented 10/09/2019 às 13:05
  • element utilizado na arrow function já está declarado no escopo superior, ao utilizar dessa maneira acusa-se um erro. Tentei contornar chamando uma outra função touchStar(data) { this.setState({ rating: data }); }, mas volto ao erro de setState's aninhados. Commented 10/09/2019 às 13:34

1 Resposta 1

1

O problema é que você está chamando a função logo que você cria o componente. Tente substituir nos componentes o:

onPress={this.setState({ rating: element })}

por:

onPress={() => this.setState({ rating: element })}

Exemplo funcional com botões

1
  • 1
    Funcionou muito bem, obrigado! Commented 10/09/2019 às 14:57

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 .