Как проверить, если отправить готовый метод POST в базу данных, а затем повторно выполнить рендеринг в React-Redux

Question

Я отправляю форму в серверную часть, а затем повторно визуализирую компонент, чтобы получить список новых элементов. Прямо сейчас я делаю рендеринг в функции componentDidUpdate:

componentDidUpdate() {
  this.props.fetchListStart();
}

Моя форма отправки выглядит следующим образом:

<form
  onSubmit={e => {
    e.preventDefault();
    this.props.submit();
    this.props.close();
  }}
>
  <div className="row" style={{ textAlign: 'start' }}>
    Do you really want?
    <div className="col-md-12 buttonContainer">
      <ButtonA
        label="Submit"
        style={{ width: '50%' }}
        primary
        type="submit"
      />
    </div>
  </div>
</form>

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

Answer 1

Из вашего вопроса кажется, что вам нужно вызвать функцию setState родительского компонента в обратном вызове успеха вашего метода, который отправляет в db.Затем вызовите fetchListStart в качестве обратного вызова для setState.

, например,

class ParentComponent extends React.Component{
    submit(){
      fetch("/data").then(response=>{
        this.setState({
          data:response
        },this.fetchListStart())
      })
    }

    render(){
      return <ChildComponent {...this.state}  submit={this.submit} />
    }

}

Я предполагаю, что вам нужно получить список данных только после визуализации представления.Второй параметр для setState () - это дополнительная функция обратного вызова, которая будет выполнена после завершения setState и повторной визуализации компонента.

Answer 2

Переместите свой fetchListStart () к обратному вызову функции обновления.

Например: axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); fetchListStart(); }) .catch(function (error) { console.log(error); });