Блог

сначала я определяю состояние в классе и визуализирую его с помощью реквизитов, после этого я пытаюсь обновить состояние при нажатии кнопки и добавлении обработчика событий к кнопке, но

когда я пытаюсь записать в консоль обновленное состояние после nameChangeHandler, и я не могу видеть обновленное состояние, но я могу видеть предыдущее состояние, хотя

это мой App.js файл

 import React, { Component } from 'react';
import Person from './Person/Person';

import './App.css';

class App extends Component {
  state = {
    persons: [
      { name: 'sagar', age: 22 },
      { name: 'nitin', age: 18 },
      { name: 'ankita', age: 21 },
    ],
    otherData: 'some other value',
  };
  changeNameHandler = () => {
    this.setState({
      persons: [
        { name: 'sagar', age: 22 },
        { name: 'nitin', age: 18 },
        { name: 'ankita-nanda', age: 91 },
      ],
    });
    console.log(this.state);
  };
  render() {
    return (
      <div className='App'>
        <h1>Hello world!!!!</h1>
        <Person
          name={this.state.persons[0].name}
          age={this.state.persons[0].age}
        />
        <Person
          name={this.state.persons[1].name}
          age={this.state.persons[1].age}
        >
          i'm going to college
        </Person>
        <Person
          name={this.state.persons[2].name}
          age={this.state.persons[2].age}
        />
        <button onClick={this.changeNameHandler}>Switch Names</button>
      </div>
    );
    // return React.createElement(
    //   'div',
    //   { className: 'App' },
    //   React.createElement('h1', null, 'hope this works!!')
    // );
  }
}

export default App;  

и это мой Person.js файл

 import React from 'react';

const person = (props) => {
  return (
    <div>
      <p>
        Hey, my name is {props.name} and I'm {props.age} yeras old!
      </p>
      <p>
        {props.children}--{props.name}
      </p>
    </div>
  );
};

export default person;  

это скриншот изображения

setState является асинхронным, поэтому, если вы попытаетесь войти в консольный журнал после события click, там будет то же состояние.

Если вы хотите проверить обновленное состояние, вы можете попробовать консоль.запишите это выше рендеринга.

 render() {
console.log(this.state)
    return (
      <div className='App'>
        <h1>Hello world!!!!</h1>
        <Person
          name={this.state.persons[0].name}
          age={this.state.persons[0].age}
        />
        <Person
          name={this.state.persons[1].name}
          age={this.state.persons[1].age}
        >
          i'm going to college
        </Person>
        <Person
          name={this.state.persons[2].name}
          age={this.state.persons[2].age}
        />
        <button onClick={this.changeNameHandler}>Switch Names</button>
      </div>
    );
    // return React.createElement(
    //   'div',
    //   { className: 'App' },
    //   React.createElement('h1', null, 'hope this works!!')
    // );
  }
  

попробуйте это:

 changeNameHandler = () => {
  this.setState({
    persons: [
      { name: 'sagar', age: 22 },
      { name: 'nitin', age: 18 },
      { name: 'ankita-nanda', age: 91 }
    ]
  });
  setTimeout(() => {
   console.log(this.state);
  }, 0);
};
  

setState() это асинхронная функция, поэтому для запуска требуется некоторое время, и выполняется следующая строка кода.

Поскольку состояние еще не обновлено, вы получите предыдущее состояние.

setTimeOut() выполняет трюк и запускается после обновления состояния.