1

Estou tentando incluir em um array várias mensagens que estão na mesma função. Recebo algumas dados e faço algumas comparações de acordo com alguns requisitos, resultando em uma mensagem que preciso exibir na tela. São 26 situações ao todo, pensei em salvar em um array e fazer um .map() para exibir para o usuário. Mas como as comparações estão na mesma função, não estou conseguindo atualizar o state do array.

    const [messages, setMessages] = useState([])
    const calculateMan = () => {
        setOpen(true);
        let state = true
        //===========================================================================================================================================//
        ////- APOSENTADORIA POR IDADE URBANA DIREITO ADQUIRIDO ATÉ A DATA DA REFORMA (13.11.2019)
        if (age >= 65 && totalUrbanContri > 15) {
            setMessages([...messages, { content: 'Possível aposentadoria por idade urbana'}])
        } else {
            setMessages([...messages, { content: 'Não Possível aposentadoria por idade urbana'}])
        }
        //===========================================================================================================================================//
        //APOSENTADORIA POR IDADE HÍBRIDA DIREITO ADQUIRIDO ATÉ A DATA DA REFORMA (13.11.2019)
        if (age >= 65 && totalUrbanContri + totalRuralContri >= 15){
            setMessages([...messages, { content:'Possível aposentadoria por idade hibrida'}])
        } else {
            setMessages([...messages, { content:'Não possível aposentadoria por idade hibrida'}])
        }
        //===========================================================================================================================================//
        //APOSENTADORIA POR TEMPO DE CONTRIBUIÇÃO – DIREITO ADQUIRIDO ATÉ A DATA DA REFORMA (13.11.2019)
        if (totalUrbanContri >= 15) {
            let especial15 = totalEspecialQuinzeContri * 2.33 
            let especial20 = totalEspecialVinteContri * 1.75 
            let especial25 = totalEspecialVinteCincoContri * 1.40
            let totalAteReforma = totalUrbanContri + totalRuralContri + especial20 + especial25 + especial15 + totalProfessorContribuicao 
            if (totalAteReforma>= 35) {
                setMessages([...messages, { content: 'Apto a aposentadoria por tempo de contribuição'}])
            } else {
                setMessages([...messages, { content: 'Não apto a aposentadoria por tempo de contribuição'}])
            }
        }
    }

Aqui só tem 3 condiçoes, mas ao todo são 26. Do jeito que está ali, quando faço um map() o resultado é sempre o último elemento do array pra toda vez que eu clico.

                    <button className="px-4 py-2 text-white bg-green-500 rounded-md" onClick={()=> data.gender == 1 ? calculateMan() : calculateWoman()}>
                        Calcular
                    </button>

Estou exibindo os resultados em um Modal, mas a cada click ele insere somente a última mensagem na tela. Quer dizer que ele roda todas as 26 situações e salva em messages somente o resultado da última situação.

      const body = (
        <div style= {{justifyContent: 'center', alignItems: 'center', width: 'auto', height: '600px', background: '#fff'}}>
            {console.log(messages)}
            {messages !== [] && messages.map(message => (
                <div key={message.content}> 
                    {message.content}
                </div>
        ))}
        </div>
      );
2

1 Resposta 1

0

Existe a solução mais simples que é criar um array e adicionado os valores e por fim atualizar o estado do componente, a solução mais complexa também dá, mas, talvez esteja complicando o que poderia ser simples, vou criar os dois exemplos para que tenha a possibilidade de escolher no seu projeto:

Exemplo simples (só acontece uma vez a atualização do componente e o desempenho é melhor)

function App() {
 const age = 18 
 const [messages, setMessages] = React.useState([]); 
 const handleCalculate = () => {
  const m = [];
  if (age <= 18) {
    m.push({content: "Menor que 18"});
  }
  if (age / 2 === 9) {
    m.push({content: "É 9"});
  }
  if (age / 3 !== 9) {
    m.push({content: "É diferente 9"});
  }
  setMessages(state => [...state, ...m]);
 }
 return (
  <div>
    <ul>
      {messages.length > 0 && messages.map((x,i) => (
        <li key={i}>{x.content}</li>
      ))}
    </ul>
    <button onClick={handleCalculate}>Acionar</button>
  </div>
 )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

Exemplo direto no estado (é complicado porque o componente é atualizado a cada item contemplado no estado da váriavel messages):

function App() {
 const age = 18 
 const [messages, setMessages] = React.useState([]); 
 const handleCalculate = () => {
  if (age <= 18) {
    setMessages(state => [...state, {content: "Menor que 18"}]);
  }
  if (age / 2 === 9) {
    setMessages(state => [...state, {content: "É 9"}]);
  }
  if (age / 3 !== 9) {
    setMessages(state => [...state, {content: "É diferente 9"}]);
  }
 }
 return (
  <div>
    <ul>
      {messages.length > 0 && messages.map((x,i) => (
        <li key={i}>{x.content}</li>
      ))}
    </ul>
    <button onClick={handleCalculate}>Acionar</button>
  </div>
 )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

2
  • 1
    Deu certo meu amigo! E da forma mais simples :)) Obrigado mesmo pela sua ajuda!! Commented 31/03/2021 às 15:01
  • Se for útil assinale como resposta da sua pergunta @GabrielSouza
    – novic
    Commented 31/03/2021 às 15:23

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 .