This.state поменялся в react devtools, но не поменялся в консоли. В чем причина?

Question

[Алексей Кондаков]

import React, { Component } from 'react';

import Modal from './components/Modal';

import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false,
      time: ' ',
      email: ' ',
      name: ' ',
    };

    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);
  }

  handleShow() {
    this.setState({showModal: true});
  }

  handleHide() {
    const Vemail = document.querySelector('#email').value;
    const Vname = document.querySelector('#name').value;

    this.setState({showModal: false,
                   email: Vemail,
                   name: Vname});

    let yyy = this.state;
    console.log(yyy);
  }

  render() {
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          <form className="form">
            <label htmlFor = "date">Time</label>
            <input type = "text" id = "date"/>
            <label htmlFor = "email">Email</label>
            <input type = "text" id = "email"/>
            <label htmlFor = "name">Name</label>
            <input type = "text" id = "name"/>
            <button onClick={this.handleHide}>Click</button>
          </form>
        </div>
      </Modal>
    ): null;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <a href="#" onClick={this.handleShow}> <h1>C`mon, sign in!</h1> </a>
        {modal}
      </div>
    );
  }
}

export default App;

import { Component } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

export default class Modal extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    console.log('Hi', this.state, this.props);
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

Answer 1

[Роман Александрович]

Вам нужно запомнить что setState асинхронная функция.

this.setState({showModal: false,
                   email: Vemail,
                   name: Vname},()=>console.log(this.state)); //здесь будет то чт онужно 

    let yyy = this.state;
    console.log(yyy);//здесь дынные еще не попали в стэйт

Answer 2

[Алексей Кондаков]

Видимо где-то туплю со state, но никак не могу понять, где именно.