0

Meu state não funciona por nada, já li na documentação, fiz igual como devem observar sou novo no react, exemplo do meu código:

export default class Cursos extends Component{
  
    state = {dataLoad: '' };
    state = { isHungry: '' };

    componentDidMount(){
        
     console.log(data.cursos)
       this.setState({ isHungry: 'false' });
       this.setState({
            dataLoad:'teste'
        })
        console.log(isHungry)
    }

2 Respostas 2

0

Olá, como iniciou o seu projeto React?

É necessário importar o react e depois escrever a function. Começa aprendendo a escrever seus componentes em formato de funções que é mais fácil de aprender e atual. O estado declarei na const onde o name é a variável que será utilizada no seu componente react, e o setName é onde você irá setar o nome e controlar esse state, caso você crie uma função, o setName('Novo nome') serve para você controlar esse estado cuidando de um dos fundamentos do react que é a imutabilidade. Como já deixei o nome João ali, ele irá retornar para você entre as tags div.

import React, { useState } from 'react'

function nomeDoComponent() {
  const [name, setName] = useState('João')

  return (<div>{name}</div>)
}

export default nomeDoComponent
3
  • Ele está usando o conceito de classe, logo dessa forma não vai funcionar. 18/08/2020 às 12:45
  • Se o react dele estiver atualizado vai funcionar sim. O react atualizado tem suporte para classes e funções. Os hooks veio p melhorar.
    – itamazor
    18/08/2020 às 16:18
  • 1
    Obrigado, suas solução foram muito boas 18/08/2020 às 20:35
0

Realmente você está iniciando, o estado do componente como foi criado não vai funcionar, é isolado apenas a um local e nele pode ter vários estados no caso exemplifico assim:

state = {dataLoad: '', isHungry: ''};

e para alterar os seus estados podendo ser individual:

this.setState({dataLoad: true});

ou em conjunto:

this.setState({dataLoad: true, isHungry: false});

resolvi contudo exemplificar um simples componente:

class Cursos extends React.Component {  
    state = {dataLoad: '', isHungry: '' };    
    componentDidMount(){
      this.setState({dataLoad: true, isHungry: false});
    }
    render() {
      return (
        <div>
          <div>{new String(this.state.dataLoad)}</div>
          <div>{new String(this.state.isHungry)}</div>
        </div>
      )
    }
}

ReactDOM.render(<Cursos/>, 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"></div>

tem também com hooks ou Componentes Funcionais, como nesse exemplo:

function Cursos() {  
  const [dataLoad, setDataLoad] = React.useState('');
  const [isHungry, setIsHungry] = React.useState('');
  React.useEffect(() => {
    setDataLoad(true);
    setIsHungry(false);
  }, []);    
  return (
     <div>
       <div>{new String(dataLoad)}</div>
       <div>{new String(isHungry)}</div>
     </div>
  )   
}

ReactDOM.render(<Cursos/>, 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"></div>

2
  • Obrigado suas soluções me ajudaram a resolver 18/08/2020 às 20:35
  • Engraçado @Alderjaniodeoliveiraalmeida a sua resposta certa é diferente da sua pergunta.
    – novic
    18/08/2020 às 21:24

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 .