Почему событие срабатывает не правильно?

Question

[uzi_no_uzi]

Имеется вот такой React компонент:

import React from 'react';

import './AppSearch.css'

class AppSearch extends React.Component {

	constructor() {
		super();

		this.state = {
			request: '',
		}

		this.onSearch = (e) => {
			this.setState({
				request: e.target.value,
			})
			console.log(this.state.request);
		}

	}

	render () {
		return(
			<input className='AppSearch' value={this.state.request} onChange={ this.onSearch } placeholder = 'Search parametr' />
		)
		
	}
};

export default AppSearch;

По как-то причине событие onChange работает не правильно. Не могу разобраться почему.

Функция onSearch сначала меняет request, а потом только выводит это значение, а получается так, как-будто оно работает наоборот:



На скриншоте видно, что я ввел три двойки, а в консоли их только две. С чем это может быть связано?

Answer 1

[0xD34F]

Во-первых, события не срабатывают - никакие и никогда. Срабатывают обработчики событий. Во-вторых - между "неправильно" и "не так, как мне бы хотелось" есть существенная разница, попытайтесь её осознать.

Метод setState - асинхронный. Хотите получить доступ к изменённому стейту - используйте коллбек:

this.setState({
  request: e.target.value,
}, () => console.log(this.state.request))