react js getDerivedStateFromProps вызывает непрерывно

#reactjs #react-native

Вопрос:

 constructor(props) {
    super(props);
    this.state = {
        myStateVar: []
    }
}

static getDerivedStateFromProps(props, state) {
    if (props.myStateVar !== state.myStateVar) {
        return {
           myStateVar: props.myStateVar
        }
    }

    toggle() //Need to call the function each time when we get the props update
    return null;
}

toggle() {
    this.setState({
        otherStateVar: []
    })
}

Я переношу свое приложение react с версии 16.3 на последнюю версию. У меня проблема, когда getDerivedStateFromProps() вызывается непрерывно, потому что состояние обновляется в toggle(). Мне нужно вызвать toggle(), когда реквизиты были обновлены

Помогите мне решить проблему.

1. Для этого вы можете использовать componentDidUpdate.

2. componentDidUpdate не получит правильные изменения / обновления prop?

3. componentDidUpdate будет вызываться с prevProps в качестве аргумента. Вы можете проверить условие там. Я добавил ответ, который отражает это

Ответ №1:

Почему вы не используете componentDidUpdate для этого? Мне кажется, вы можете добиться результата с помощью:

 /**
 * @param {Props} prevProps props of the component
 **/
componentDidUpdate(prevProps) {
  if (prevProps.myStateVar !== this.props.myStateVar) {
    this.setState({ myStateVar: this.props.myStateVar });
    toggle();
  }
}

Ответ №2:

getDerivedStateFromProps выполняется при каждом рендеринге. Это также статический метод, поэтому его не следует вызывать setState (или другие нестатические функции). В документации React указывает, что в большинстве случаев вам не нужен этот метод для достижения изменения состояния на основе изменений prop здесь.

Итак, первый вариант, не вызывайте setState, он запускает повторный рендеринг, и повторный рендеринг запустит getDerivedStateFromProps. По сути, бесконечный цикл повторного рендеринга.

 static getDerivedStateFromProps(props, state) {
    if (props.myStateVar !== state.myStateVar) {
        return {
           myStateVar: props.myStateVar,
           otherStateVar: [] // from toggle
        }
    }

    // Should not be called everytime this method runs. Only when props change
    // toggle() //Need to call the function each time when we get the props update
    return null;
}

Другой ваш вариант — это запоминание, которое довольно подробно описано в той ссылке, которую я предоставил.