React input обновление последней буквы Есть ли изящное решение

06 июня 2021, 10:10

Есть React контрол с тегом input и дочерний контрол обрабатывающий введенное значение.

<div>{this.state.Inputed}</div>
<input
    autoFocus
    type="text"
    value={this.state.Inputed}
    onChange={this.handleChange}
/>
<Chaild Inputed={this.state.Inputed} />

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

handleChange = (event) => {
    console.log("Value from event:", event.target.value);
    this.setState({ Inputed: event.target.value }, () => {
        console.log("Value from State:", this.state.Inputed);
    });
}

после долгих мытарств обработчик написан так

handleChange = async function (event) {
    await this.setState({ Inputed: event.target.value });
    console.log(this.state.Inputed);
    this.setState({ Inputed: this.state.Inputed });//повторно ввожу чтобы обновить дочерний контрол
}

Вопрос: есть ли какой ни будь стандартный способ бороться с таким поведением?

На мой взгляд это баг.

К примеру во Vue такой проблемы нет.

Answer 1

Как вы правильно заметили, setState - это асинхронная операция. К тому же она не возвращает промис, поэтому писать перед её выполнением await бесcмысленно.

Если вы хотите посмотреть как изменился state после выполнения setState, то можно сделать так:

handleChange = (event) => {
    console.log("Value from event:", event.target.value);
    this.setState({ Inputed: event.target.value }, () => {
        console.log("Value from State:", this.state.Inputed);
    });
}

К тому же после изменения состояния в результате вызова setState выполняется перерисовка компонента и дочерних компонентов (в случае если что-то из state попадает в props к детям). Можно поставить вот такой эксперимент:

handleChange = (event) => {
    console.log("Value from event:", event.target.value);
    this.setState({ Inputed: event.target.value });
}
...
render() {
    console.log("Value from State:", this.state.Inputed);
    ...
}

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