Как последовательно вызывать выборки (A -> B -> C) внутри компонента React?

Question

У меня есть 3 функции извлечения: a(), b(a_id), c(b_id). Функция a вернет a_id и перейдет к функции b, а b вернет id и перейдет к c.

componentDidUpdate(prevProps) {
  this.gotoanotherPage(this.props.a_id);
}

generateBody() {
  this.props.a();
  this.props.b(this.props.a_id);
  this.props.c(this.props.b_id);
}

render() {
  body = generateBody();
  return <framework {body}/>
}

Моя проблема в том, что a() еще не завершил извлечение и получение ответа, но b и c уже выполнены, а this.props.a_id и this.props.b_id не определены. Я не мог изменить функции a, b и c.

Кто-нибудь знает, как установить вызов функции в порядке?

Answer 1

Вы можете использовать componentDidMount для вызова первой выборки, затем используйте componentDidUpdate для вызова второй выборки, которая зависит от первой. Затем сделайте то же самое для третьего извлечения.

Вы можете использовать prevProps, чтобы проверить, получили ли вы первый и второй ответы.

Ваш компонент будет выглядеть примерно так:

class MyComponent extends Component {
  componentDidMount() {
    this.props.fetchA();
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.a_id && this.props.a_id) { // it means you received a_id
      this.props.fetchB(this.props.a_id);
    }

    if (!prevProps.b_id && this.props.b_id) { // it means you received b_id
      this.props.fetchC(this.props.b_id);
    }
  }

  render() {
    return <framework />
  }
}