1

Boa noite. Estou aprendendo os hooks e gostaria de ajuda para resolver o problema de atualização do valor do useState a partir de um array. Tenho o código a seguir:

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

const Jantar = () => {
  const opcoes = ['Hamburger', 'Chachorro-quente', 'Lasanha', 'Strogonoff'];
  const [comidas, setComidas] = useState(opcoes[0]);

  const onPress = () => {
    setComidas(comidas => comidas + 1);
  }
  
  return (
    <>
      <Text style={styles.text}>Hoje você vai jantar: {comidas} </Text>
      <TouchableOpacity style={styles.botao}>
        <Text style={styles.text} onPress={onPress} >Escolher comida</Text>
      </TouchableOpacity>
    </>
  );
}

export default function App() {
  
  return (
    <View style={styles.container}>
      <Jantar />
    </View>
  );
}

Tenho um array com comidas e um campo de texto que diz qual comida a pessoa vai jantar. Cada clique no botão deve atualizar o campo de texto com o próximo item do array de comidas. Não estou conseguindo fazer o campo de texto atualizar com a função onPress. Pela minha análise, preciso vincular, de alguma forma, a variável "comida" - que inicializa com o primeiro item do array de comidas - com o array "opcoes". Não sei como fazer.

1 Resposta 1

1

Você está fazendo errado, não está passando a opções do array e sim concatenando o texto do primeiro item do array com um valor 1, e tem que fazer uma outra variável de estado onde essa vai guardar a posição para mostrar uma opção e com essa atualização de posição com useEffect mostrar o outro valor contido no array, exemplo:

function App() {
  const opcoes = [
    'Hamburger', 
    'Chachorro-quente', 
    'Lasanha', 
    'Strogonoff'
  ];

  const [position, setPosition] = React.useState(0); // primeiro item do array
  const [comidas, setComidas] = React.useState(''); // estado inicial

  const onPress = () => {
    const pos = position + 1 === opcoes.length 
      ? 0 
      : position + 1;
    setPosition(pos);
  }

  React.useEffect(() => {
    setComidas(opcoes[position]);
  }, [position]);
  return (
    <div>
      <p>{comidas}</p>
      <p><button onClick={onPress}>Próximo</button></p>
    </div>
  )
}
 ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2
  • Obrigado Virgílio. Ajudou demais. Commented 7/04/2020 às 1:06
  • @CésarAugusto se for resposta do sua pergunta assinale
    – novic
    Commented 7/04/2020 às 1:13

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 .