@Richswitch
junior

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

Привет!
Не могу изменить состояние после сабмита формы. Думаю это связано с асинхронностью 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 я получить не могу
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
при сабмите 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
      }
    });
  };
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы