Вызов метода внутри getDerivedStateFromProps в React

Перед обновлением реагировать на версию 16.3, я бы вызвал метод, основанный на изменениях в реквизите, например:

componentWillReceiveProps(nextProps){
   if(this.props.country.length !== nextProps.country){
    doSomething(); //example calling redux action
    }
}

componentWillReceiveProps небезопасен в Версии 16.3 и мы должны использовать getDerivedStateFromProps. Тем не менее, этот метод возвращает объект, и я не знаю, как я могу вызвать метод из него так же, как я делаю с componentWillReceiveProps

Ответ 1

Да, вам нужно вернуть объект, который является новым состоянием, которое получено из nextProp. Согласно документам:

getDerivedStateFromProps должен возвращать объект для обновления состояния или null, чтобы указать, что новые реквизиты не требуют каких-либо обновлений состояния.

Но поскольку вы не обновляете свое состояние каким-либо образом внутри вашего componentWillReceiveProps, вы должны использовать componentDidUpdate вместо getDerivedStateFromProps:

componentDidUpdate(prevProps){
  if ( prevProps.country !== this.props.country.length ) {
    doSomething(); //example calling redux action
  }
}

Ответ 2

Для этой ситуации было полезно, чтобы OP использовал componentDidUpdate но мне было нужно получить getDerivedStateFromProps поэтому мне пришлось также сделать свою настраиваемую функцию статической и вызвать ее, используя имя класса внутри getDerivedStateFromProps. Что-то вроде этого:

componentDidMount() {
    const something = ClassComponentName.runThisFunction();
    this.setState({ updatedSomething: something });
}

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.key !== prevState.key) {
        return { 
            updatedSomething: ClassComponentName.runThisFunction()
        };
    }
    return null;
}

static runThisFunction() {
    //do stuff and return value
}

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

Ответ 3

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

поместите функцию в состояние в конструкторе:

constructor(props){
   super(props);
   this.state = {
      func1:this.func1.bind(this)
   }
}

получить функцию из состояния в getDerivedStateFromProps:

getDerivedStateFromProps(props,state){
   return {
       model:state.func1(props.model)
   }
}