Вызовы API в componentDidUpdate и componentWillReceiveProps

Question

Я делаю вызовы API в методе componentDidMount() в соответствии с рекомендациями React.Внутри компонента у меня есть <Link>, который указывает на один и тот же компонент с разными параметрами URL.

Однако, когда я нажимаю на <Link>, componentDidMount() не вызывается, и я не могу делать вызовы APIс обновленными параметрами URL.

Итак, я попытался поместить вызовы API внутрь componentDidUpdate() и componentWillReceiveProps()

Это приводит к переполнению стека, так как вызов состояния API вызывает состояние componentDidUpdate() и componentWillReceiveProps() которые снова делают вызовы API, ведущие к бесконечному циклу.

Как мне преодолеть это?

Какое рекомендуемое решение вписывается в философию React?

Answer 1

удалить componentDidUpdate и использовать только componentWillReceiveProps () {<--- и вызывать api здесь} </p>

Answer 2

Внутри компонента, который у меня есть, который указывает на один и тот же компонент с разными параметрами URL

Это означает, что компонент не размонтирован / перемонтирован, так как это один и тот же компонент, поэтому componentDidMountне будет вызываться.

вызовы API устанавливают состояние, инициирующее состояние componentDidUpdate () и componentWillReceiveProps (), которые снова делают вызовы API, ведущие к бесконечному циклу

Вы должны сделать APIвызов в componentDidUpdate (componentWillReceiveProps будет устаревшим, и асинхронные вызовы здесь не должны выполняться в любом случае), но проверьте, был ли он уже выполнен, проверяя, есть ли данные, возвращенные вызовом API, там или изменились, чтобы избежать бесконечного повторного вызова.рендеринг:

componentDidUpdate(prevProps, prevState) {
  if (this.state.data.length === 0) { // or compare with `prevState`
    // make the api call
  }
}