Почему стэйт не обновляется?

Question

[newhacke]

Проблема с отправкой данных в localStorage.
Пытаюсь во внутреннем стейте поменять данные, чтобы потом в этой же функции отправить их в localStorage. Для дальнейших действий. Но приходят пустые строки.

state = {
    searchWord: "",
    newstyle: false,
    modal2Visible: false,
    inputValue: 1,
    favouritesMas: {
      id: "",
      favTitle: "",
      favName: "",
    },
  };

onChange = (e) => {
    this.setState({ searchWord: e.target.value });
  };

  onChangeNamevalue = (e) => {
    this.setState({ favName: e.target.value });
  };

addFav = (e) => {
    e.preventDefault();

    this.setState((prevState) => {
      let favouritesMas = Object.assign({}, prevState.favouritesMas);
      favouritesMas.favTitle = this.state.favouritesMas.favName;
      favouritesMas.favName = this.state.favouritesMas.searchWord;
      return { favouritesMas };
    });

    localStorage.setItem(
      this.state.favName,
      JSON.stringify(this.state.favouritesMas)
    );

    this.handleCancel();
  };

Comments

[newhacke]

ну то есть в локал сторрэдж попадает пустой массив

Answer 1

[McBernar]

Потому что запись в стейт — не синхронная операция. Добавление в локалсторадж происходит раньше записи в стейт.

Comments

[newhacke]

Можно более подробнее. как решить эту проблему?

[newhacke]

Ну вроде она же расположена после setState, почему она выполняется раньше?

[McBernar]

Для начала можете вторым параметром в setstate, после колбека, передать функцию записи в сторадж. Она должна выполниться после записи в стейт.

Либо берите нужные вам данные не из стейта. Я, честно говоря, вообще не понял — что у вас происходит в сетстейт. Зачем вы переписываете из стейта в стейт? Какой в этом сакральный смысл?

[alex4answ]

newhacke, потому что она асинхронна, она не обязана выполниться раньше или позже.

смотри как работать с асинхроными ф-ми

[newhacke]

McBernar, ну причину я не нашел в данном коде где была ошибка, но нашел более простое в тысячу раз решение) Но корень решения было, что я действительно несколько раз менял значение) спасибо)

[newhacke]

Может есть источник, где конкретно по классовым компонентам, что касаемо синхонности и асинхронности почитать)

[McBernar]

Документация неплохо справляется с этим

[newhacke]

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

defaultValue={this.state.searchWord}
style={{ width: "100%", fontSize: "20px" }}
disabled
>

{this.state.searchWord}

вот это обновляется по средством

onChange = (e) => {
this.setState({ searchWord: e.target.value });
};

показывает он вводимое слово единожды и потом оно остается каким было при первом открытии модального окна. Кажется проблема в том, что он не рендерит разметку. Как можно вызвать повторный рендер разметки внутри одной классовой компоненты? Что бы заменить тупо значение селекта в динамике, что бы менялось слово, и одновременно менялось значение селекта?

[McBernar]

value нужно, а не defaultValue

Answer 2

[no-taktik]

Можно перенести сохранение в localStorage во второй аргумент setState