Как создать новую статическую функцию React getDerivedStateFromProps в качестве метода жизненного цикла, используя HoC в библиотеке перекомпоновки?

Question

Недавно выяснилось, что скоро React станет устаревшей componentWillReceiveProps и на его месте новая статическая функция getDerivedStateFromProps, Подробнее здесь

В настоящее время я переносю свои приложения на этот новый API, но у меня возникла проблема сgetDerivedStateFromProps, из-за того, что я использую библиотеку перекомпоновки для компонентов более высокого порядка. Мы используем componentWillReceive пропускает через объект жизненного цикла библиотеки.

Поэтому, прежде чем перейти к новому API, у меня было следующее:

export function someHoC () {
  return compose(
    lifecycle({
      componentWillReceiveProps (nextProps) {
        const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

Теперь это изменилось на следующее:

export function someHoC () {
  return compose(
    lifecycle({
      getDerivedStateFromProps (nextProps) {
          const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

Тем не мение, getDerivedStateFromProps должен быть статичным, поэтому я получаю предупреждение об этом и не знаю, как с этим справиться.

warning.js? 7f205b4: 33 Предупреждение: жизненный цикл (MyComponent): getDerivedStateFromProps() определен как метод экземпляра и будет игнорироваться. Вместо этого объявите это как статический метод.

Что я могу сделать, чтобы передать его как статический метод жизненного цикла в мой компонент?

Answer 1

Если вы хотите использовать getDerivedStateFromProps вам нужно объявить это как статический метод:

static getDerivedStateFromProps() {...}

Очевидно, это делает getDerivedStateFromProps статический, что означает, что вы не можете назвать это так же, как вы могли бы назвать componentWillReceiveProps,

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

Вы также можете заменить componentWillReceiveProps с UNSAFE_componentWillReceiveProps ( документы), который будет работать так же. Однако из-за предстоящей функции асинхронного рендеринга это может вызвать некоторые проблемы.

Answer 2

Вы должны использовать следующее в вашем жизненном цикле

setStatic('getDerivedStateFromProps', (nextProps, prevState) => {}) и сохранить предыдущие значения в состоянии компонента для извлечения его из prevState аргумент