Как вывести в консоль обновленный через стейт объект?

Рейтинг: 1Ответов: 1Опубликовано: 13.03.2023

Как сделать так, чтобы в консоль выводились актуальные изменения value? Сейчас в консоль выводится предыдущее значение. При указании в инпуте "а", в консоли пустая строка, при указании "ab", выводится "a"? По итогу, должен выводиться в консоль получившийся объект при изменении любого поля

<TooltippedField
  textInputProps={{
    placeholder: intl.formatMessage({ id: 'enter_name_placeholder' }),
    value: state.nameValue
   }}
    style={{ width: '480px' }}
    onChange={changeName}
/>

  const gpoValue = {
    nameValue: '',
    descriptionValue: '',
  }

const [state, setState] = useState(gpoValue);

  const changeName = (e) => {
    setState({...state, nameValue: e.target.value});
    console.log(state);
  }
javascript reactjs асинхронность state
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Т.к. смена состояния, это асинхронное действие, то получить новое значение сразу после setState не получится.

Однако, можно сделать так: при смене стейта, сохраним значение в переменную и ее выведем в консоль

const changeName = (e) => {
    setState(prev => {
        const value = {...prev, nameValue: e.target.value}
        console.log(value);
        return value;
    );
    console.log(state);
}

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

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