Как избавиться от начального значение в useState?

Question

[yumakaev]

Доброго вечера!
Как избавиться от начального значения value в input?
Когда начинаю писать, первым символом в консоль падает предыдущее значение (оно же начальное)
https://codesandbox.io/s/wizardly-williamson-nxrl7

Answer 1

[Вадим]

У Вас нет проблемы, которую Вы описали, потому что это работает несколько не так, как Вы, я полагаю, думаете.

const Logic = () => {
  const [inputValues, setInputValues] = useState('');
  console.log('1)', inputValues);
  const onChangeInput = e => {
    setInputValues((currentState) => {
      console.log('2) current', currentState); 
      return e.target.value});
    console.log('3)', inputValues);
  };

  return <View inputValues={inputValues} onChangeInput={onChangeInput} />;
};

// Будем вводить букву 'a' в инпут. В итоге в консоле получим:
// 1)"" <-- из-за useState('');
// 2) current "" <-- так как значение мы ещё не обновили, то получаем то же начальное значение из useState('');
// 3) "" <-- вызвывается ПОСЛЕ setInputValues, тем не менее, имеет ещё не обновлённое значение.
// 1) a <-- произошло изменение состояния, компонент перерисовался.

Дальше, в заивисимости от того, что Вы хотите сделать,
выводите значение либо в "1)" - это вывод с новым state но перед перерисовкой,
либо в "3)" Вам нужно выводить e.target.value.

Операция изменения состояния - асинхронная и реакт может собирать несколько изменений состояния в одно для оптимизации.

Answer 2

[Nikolay Matyushkin]

Добавлю к выше написанному комментарию от Вадима.

Иногда существует надобность в том, что бы проводить какие-либо манипуляции с данными сразу после того, как мы их изменили в функции. Возьмём пример автора:

import React, { useState } from "react";
import "./styles.css";

const View = ({ inputValues, onChangeInput }) => {
  return <input type="text" value={inputValues} onChange={onChangeInput} />;
};

const Logic = () => {
  const [inputValues, setInputValues] = useState("");

  const onChangeInput = e => {
    setInputValues(e.target.value);

    // *** Здесь мы хотим взять новые данные и что-то с ними сделать (в данный
    // момент мы просто выводим в консоль)
    console.log(inputValues);
  };

  return <View inputValues={inputValues} onChangeInput={onChangeInput} />;
};

export default Logic;

*** Здесь данные устаревшие, это описал Вадим, и я с ним согласен. Но всё-таки, есть вариант использовать данные сразу после их изменения, и к сожалению в хуках этот вариант выглядит куда менее эстетичнее, нежели в классах.

Дело в том, что в классах для изменения состояния используется setState (кэп). setState первым параметром принимает изменяемый объект, а вторым (необязательным) параметром он принимает callback, в котором можно получить уже изменившийся state. Ниже приведён пример автора, где функциональная компонента Logic переделана в одноименную классовую компоненту. Тут. При вводе символов в input, в консоли мы будем получать символы по порядку, т.е. будем видеть актуальный state

Чтобы добиться такого же результата у автора, нужно подписаться на изменение параметра inputValues в хуке useEffect. Тут. Теперь мы так же при вводе символов в input видим актуальные данные.

Comments

[Вадим]

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

useEffect(() => {
    inputValues && console.log(inputValues);
  }, [inputValues]);

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

[Nikolay Matyushkin]

Вадим, да, совершенно верно!