1

Olá, pessoal Estou iniciando com ReactJs Alguém poderia tirar uma dúvida, por favor?

Eu fui apresentado às duas maneiras de criar componentes (de classes e de funções), e optei por usar SEMPRE funções (pelo menos por enquanto) Inclusive no App.js, já que agora podemos manipular estados via hooks, certo? hahahahaha

Bom, ainda estou um pouco confuso em relação ao useState, saquem só:

Aparentemente, quando usamos classes, os states antigos são mergeados com os novos, assim mantemos intactos os antigos, certo... Mas com componentes funcionais e useState, precisamos nos preocupar com todos os estados E é esse o meu maior enrosco huahuahuhahhauauh

Já que temos que gerenciar individualmente cada estado, seria melhor criar vários e vários, e assim cuidar de cada um separadamente? Qual é o pattern mais adequado?

Vou mandar um trechinho de código:

const App = () => {

  const [ personsState, setPersonsState ] = useState({
    persons: [
      {name: 'Max', age: 28 },
      {name: 'Eddie', age: 20 },
      {name: 'Julie', age: 25 }
    ],
    showPersons: false
  });

  const inputNameHandler = (event) => {
    setPersonsState({
      persons: [
        {name: personsState.persons[0].name, age: personsState.persons[0].age },
        {name: event.target.value, age: personsState.persons[1].age },
        {name: personsState.persons[2].name, age: personsState.persons[2].age }
      ]
    });
  }

  // minha maior dúvida é aqui
  // eu deveria ter criado outro useState só para o showPerson?
  // esta seria a melhor opção para manter os states antigos?

  const togglePersonsHandler = () => {
    const showing = personsState.showPersons;
    setPersonsState({
      persons: personsState.persons,
      showPersons: !showing
    });
  }

Desde já, muito obrigado galera!

1
  • Você faz persons e show separados.
    – novic
    Commented 1/04/2020 às 0:46

2 Respostas 2

0

Seguinte, você faz cada estado separado, se você tem uma lista de valores e tem um valor verdadeiro/falso são dados separados, talvez relacionados, mas, faça separado por vários motivos, um é organização, outro manipulação dessas informações se torna mais simples cada um no seu próprio estado, para exibição nem se fala é muito mais fácil separar os dados.

Seu código é melhor assim:

function App() {
  const [persons, setPersons] = React.useState([
      {name: 'Max', age: 28 },
      {name: 'Eddie', age: 20 },
      {name: 'Julie', age: 25 }
  ]);
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <ul>
      { show && persons.map((person, i) => (
          <li key={i}>{person.name} - {person.age}</li>
          )
        )
      }
      </ul>
      <button onClick={e => setShow(!show)}>
        {show ? 'Esconder' : 'Mostrar'}
      </button>
    </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>

No código eu reforço que os estados do componente devem ser sempre separados.

1
  • Valeu, cara! E muito obrigado pelas referências.
    – Edi Junior
    Commented 1/04/2020 às 19:03
0

Cara com o useState você pode fazer o seguinte.

setPersonsState({ ...personsState, persons: [...personsState.persons, {name: "Armando", age: 19}] })

Para você adicionar um usuário sem apagar todo o state, você precisa ao chamar setPersonsState(), adicionar o estado anterior, e o dado que você quer adicionar.

[...personsState.persons ] adiciona todo o array existente.

Da uma estudada em ES6+, da uma olhada nesse curso gratuito, muito bom

1
  • Muito obrigado, cara!
    – Edi Junior
    Commented 1/04/2020 às 19:02

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 .