0

Estou recebendo usuario como Indefined mas não estou entendendo o motivo. Podem me ajudar?

import React from 'react';

class Main extends React.Component {

    state = {
       listaMensagens: [
            {
                usuario: "",
                mensagem: ""
            }
        ]
            
    }
    
    adicionaMensagem = (newUser, newMessage) =>{
        
        const novaLista = this.state.listaMensagens
        novaLista.push(newUser, newMessage)
       

        this.setState({
            listaMensagens: novaLista
        })

    }

    onChangeUsuario = (event) => {
        this.setState({usuario: event.target.value})
    }

    onChangeMensagem = (event) => {
        this.setState({mensagem: event.target.value})
    }

  

  render(){
    const listaRenderizada = this.state.listaMensagens.map((user)=>{

        return <div>
            <p>{user.usuario}</p>
            <p>{user.mensagem}</p>
            
        </div>
    
    })
    

    return (
      <div>

        <p>{listaRenderizada}</p>
   

        <input nome={"usuario"} onChange={this.onChangeUsuario} placeholder={"Usuário"} value={this.state.usuario}></input>
        <input nome={"mensagem"} onChange={this.onChangeMensagem} placeholder={"Mensagem"} value={this.state.mensagem}></input>
        <button onClick={this.adicionaMensagem} type={"submit"}>Enviar</button>
       
  
  
      </div>
    );
  }
}

export default Main;
2
  • E ai entendeu a resposta?
    – novic
    Commented 22/10/2020 às 0:55
  • Entendi. Obrigado! Commented 22/10/2020 às 13:18

1 Resposta 1

1

Não foi colocado no estado do componente duas propriedades usuario e mensagem e por isso this.state.usuario e this.state.mensagem não existem e por isso da mensagem undefined, ou seja, não definido, o estado correto a ser criado:

this.state = {
    usuario: "",
    mensagem: "",
    listaMensagens: [
      {
        usuario: "a",
        mensagem: "b"
      }
    ]            
}

o exemplo correto com algumas alterações no código:

class Main extends React.Component {
    constructor() {
       super();
       this.state = {
          usuario: "",
          mensagem: "",
          listaMensagens: [
            {
                usuario: "a",
                mensagem: "b"
            }
         ]            
       }
    }
    adicionaMensagem = () => {        
        const {usuario, mensagem} = this.state;
        this.setState({
            usuario: '',
            mensagem: '',
            listaMensagens: [
              ...this.state.listaMensagens,
              {usuario, mensagem}
            ]
        });
    }

    onChangeUsuario = (event) => {
        this.setState({usuario: event.target.value})
    }

    onChangeMensagem = (event) => {
        this.setState({mensagem: event.target.value})
    } 

    render() {       
       return (
          <div>
              <div>{this.state.listaMensagens.map((user) => 
              <div><div>{user.usuario} - {user.mensagem}</div></div>)}</div>
              <input nome="usuario" onChange={this.onChangeUsuario} placeholder={"Usuário"} value={this.state.usuario}></input>
              <input nome="mensagem" onChange={this.onChangeMensagem} placeholder={"Mensagem"} value={this.state.mensagem}></input>
              <button onClick={this.adicionaMensagem} type="button">Enviar</button>
         </div>
       );
   }
}

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

1

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .