Вызов метода в getDerivedStateFromProps в ReactJS

перед обновлением реагировать на версию 16.3 для вызова действия на основе изменений в реквизит я использую что-то вроде этого кода :

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

но в версии 16.3 of react componentWillReceiveProps - это небезопасно, и мы должны использовать getDerivedStateFromProps но он сказал, что эти методы должны возвращать объект, и я не знаю, как я могу имитировать то, что я делаю раньше с componentWillReceiveProps делать getDerivedStateFrompProps

7
reactjs

2 ответов

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

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

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

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

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

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