Как создать событие с обновлением состояния (по getDerivedStateFromProps)

Question

Я пытаюсь изменить метод componentWillReceiveProps на статический getDerivedStateFromProps и не могу понять, как использовать ключевое слово this внутри функции getDerivedStateFromProps.

Изначально я хотел использовать this.props.history.push() внутри getDerivedStateFromProps, но не мог понять, как.
Затем я попытался вернуть состояние (как это должно делать getDerivedStateFromProps) и не смог создать событие с ним. Краткий обзор кода сделает мой вопрос более понятным.

 static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.passwordResetResult.message==="Password reset 
      Successfully")
    {
      alert("Password reset successfully please login again");
         this.props.history.push('/home')
    }
   }

Я знаю, что я должен вернуть состояние в конце; но я не нашел это полезным для моих целей, так как не понимаю, как создать событие, которое будет срабатывать при изменении состояния после возврата, а затем вызывать this.props.history.push().

Приведенный выше код вызвал ошибку

this.props не определено.

Я понимаю, что не могу использовать ключевое слово this внутри getDerivedStateFromProps; я правильно предположил, что?

Answer 1

getDerviedStateFromProps является статической функцией, поэтому вы не можете получить к ней доступ this, статические функции привязаны к самому классу, а не к экземпляру компонента. Я считаю, что это сделано специально, чтобы избежать побочных эффектов.

Итак, вместо использования this.history.push вы должны использовать nextProps.history.push, который вы получаете в аргументах ловушки жизненного цикла.

Но что касается вашего варианта использования, поскольку вы сказали, что вам на самом деле не нужно возвращать состояние, это означает, что вам на самом деле не нужно производное состояние, потому что вы не изменяете внутреннее состояние на основе определенных параметров. Вы должны использовать componentDidUpdate вместо побочных эффектов, см. https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops