Когда следует реагировать на запрос AJAX после смены реквизита?

Question

Раньше я звонил AJAX после смены реквизита на ComponentWillReceiveProps()

componentWillReceiveProps(nextProps) {
    if(nextProps.foo !== this.props.foo){
       //fetch & call this.setState() asynchronously
    }
}

После Реакции 16.3 ComponentWillReceiveProps() устареет в будущем. Вместо ComponentWillReceiveProps() есть новая функция getDerivedStateFromProps, но я не могу обновить состояние asyn c.

static getDerivedStateFromProps(nextProps, prevState) {
    // I can't get access to this.props but only state

    if(nextProps.foo !== this.props.foo){
       //fetch & call this.setState() asynchronously
    }

    // I can only return a state but update it after an AJAX request
    return {}
}

Как лучше всего это делать.

Answer 1

Вы не должны использовать getDerivedStateFromProps жизненный цикл для выполнения вызовов API. Вместо этого используйте componentDidUpdate, чтобы сделать вызов API, и как только вы получите ответ API, выполните this.setState. Также, как указано в другом ответе, вы не можете использовать this в методе stati c.

componentDidUpdate(prevProps) {
    if (this.props.myData !== prevProps.myData) {
      this.callMyApi();
    }
}

callMyApi() {
  fetch("/api")
    .then(response => {
      this.setState({ ... });
    })
}

Если вы пишете новый компонент, вы можете также написать функциональный компонент и использовать useState и useEffect для запуска вызова API при обновлении учетной записи.

Например:

...
  const {page} = this.props;
  const [images, setImages] = useState([]);

  useEffect(() => {
    fetch(`/myfavApi`)
      .then(data => data.json())
      .then(images => {
        setImages(images.concat(images));
      });
  }, [page]); // provide page(prop) as dependency. 
  ...

Answer 2

Лучшее место для асинхронных вызовов - componentDidUpdate(prevProps, prevState, snapshot) {}. getDerivedStateFromProps это метод stati c, поэтому он не имеет доступа к экземпляру компонента (не имеет доступа к this)