Как запустить событие в реакции 16.8?

Question

Я только что начал реагировать через год, а до этого я использовал componentWillRecieveProps() для вызова api (запускать действие) сразу после получения обновленных реквизитов.

  componentWillRecieveProps(nextProps) {
    if (nextProps.user !== this.props.user) {
      //Some api call using user prop
    }
  }

Но теперь componentWillRecieveProps - это заменен на getDerivedStateFromProps и там я не могу использовать this внутри него. Итак, как я могу отправить событие в более новой версии или как лучше?

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.user !== prevState.user) {
      this.fetchSetting();
      return { user: nextProps.user };
    }
    return null;
  }

  fetchSetting = async () => {
    const { fetchSetting } = this.props;
    const data = await fetchSetting();
  };

Answer 1

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

Команда React предпочитает функциональный способ (да, я знаю, это странно), использующий это: https://reactjs.org/docs/hooks-effect.html

Если вы хотите продолжать использовать способ на основе классов, тогда вы можно использовать componentDidUpdate: https://reactjs.org/docs/react-component.html#componentdidupdate

Answer 2

Вы можете использовать метод componentDidUpdate(prevProps, prevState), который является хорошей заменой для componentWillReceiveProps().

Проверьте документацию здесь: componentDidUpdate (React.Component)

В вашем примере вы можете сделать это:

static componentDidUpdate(prevProps, prevState) {
    if (this.props.user !== prevProps.user) {
        this.fetchSetting();
        return { user: this.props.user };
    }
    return null;
}

---

Но на самом деле, если вы действительно хотите соответствовать последним рекомендациям React, вы не должны использовать классы, а ловушки, которые призваны стать новой заменой , Вы можете найти больше информации о крючках на странице: Представляем крючки