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

Недавно выяснилось, что скоро 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 () определяется как метод экземпляра и будет проигнорирован. Вместо этого объявите его как статический метод.

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


person theJuls    schedule 17.04.2018    source источник
comment
покажи мне, чем ты занимаешься   -  person Omar    schedule 17.04.2018
comment
Я обновлю OP, но это не имеет отношения к проблеме, поэтому я решил удалить его.   -  person theJuls    schedule 17.04.2018
comment
Вы можете использовать setStatic, но это фактически изменит базовый компонент, что может быть не тем, что вам нужно.   -  person Oblosys    schedule 17.04.2018
comment
Я думал об этом, но именно поэтому это не решает мою проблему.   -  person theJuls    schedule 17.04.2018


Ответы (2)


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

static getDerivedStateFromProps() {...}

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

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

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

person Sauce    schedule 19.04.2018

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

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

person user2126927    schedule 18.04.2018
comment
вне жизненного цикла. - person Nir O.; 18.12.2018