Почему я не могу сделать setState в handleSubmit()?

Question

[Unknown]

Привет!
Не могу изменить состояние после сабмита формы. Думаю это связано с асинхронностью setState, но я могу ошибаться.
В моем случае это выглядит примерно так

...
  handleSubmit(e) {
    e.preventDefault();

    this.request(e.target);

    this.setState({
      ...this.state,
      currentState: {
        ...this.state.currentState,
        submited: true
      }
    });
  }

  render() {
    return (
      <Items>
        { this.state.mailData.map((data, i) => {
          return (
            <ItemRow key={'row-' + i} onSubmit={this.handleSubmit}>
              <ItemInput>
                <input id={data.id} type="checkbox" />
                <label htmlFor={data.id}></label>
              </ItemInput>
              <Item>
                <input type="email" name="email" value={data.email} disabled/>
              </Item>
              <Item> 
                <input type="text" name="name" value={data.name} disabled/>
              </Item>
              <Item>
                <p data-status={data.status}>{JSON.parse(data.status) ? 'Sent' : 'Unsent'}</p>
              </Item>
              {!data.status && 
                <ButtonSend type="submit" onClick={this.handleClick}>Send</ButtonSend>
              }

            </ItemRow>
          );
        })
        }
      </Items>
    );
  }

при сабмите this.request(e.target) отрабатывает как нужно, но setState не срабатывает совсем.

PS как я могу изменить состояние после возвращения request. В функции .then контекст this я получить не могу

Comments

[Анатолий Жаров]

Приведите полный код компонента. Как вы определяли сработал setState или нет?

Answer 1

[Антон Спирин]

при сабмите this.request(e.target) отрабатывает как нужно, но setState не срабатывает совсем.

Должен срабатывать. У вас точно handleSubmit привязан к контексту компонента?
Если нет, то это можно сделать так:

handleSubmit = e => {

};

Вызов setState можно сократить до:

this.setState({
      currentState: {
        ...this.state.currentState,
        submited: true,
      },
    });

PS как я могу изменить состояние после возвращения request. В функции .then контекст this я получить не могу

Можете:

this.request(e.target).then(() => {
    this.setState({
      currentState: {
        ...this.state.currentState,
        submited: true
      }
    });
});

Или можно использовать асинхронную функцию:

handleSubmit = async e => {
    e.preventDefault();
    await this.request(e.target);

    this.setState({
      currentState: {
        ...this.state.currentState,
        submited: true
      }
    });
  };

Comments

[Unknown]

хмм, видимо вчера я просто устал, действительно нет проблемы менять состояние в промисе. Только почему же в дебаг режиме в функции then() вместо this я получаю undefined?

[Антон Спирин]

Unknown, код то покажите свой.