Где установить состояние, зависящее от предыдущего и текущего реквизита, в React? - PullRequest
Новая
       34

Где установить состояние, зависящее от предыдущего и текущего реквизита, в React?

0 голосов
/ 24 сентября 2018

Я использовал событие жизненного цикла componentWillReceiveProps, чтобы включить или отключить переход на следующую страницу.Теперь, когда это событие изменено на UNSAFE_componentWillReceiveProps, я чувствую, что больше не должно его использовать, однако я не смог найти для него очевидной замены.

Расположение компонента происходит от props.location.pathname, поэтому мне нужно событие, где я могу получить доступ как к предыдущему, так и к следующему реквизиту, а затем установить первоначальный вид компонента в зависимости от того, должен ли быть переход, однако:

  • getDerivedStateFromProps имеет доступ только к предыдущим реквизитам.
  • shouldComponentUpdate следует использовать, чтобы сообщить компоненту, должен ли он обновляться или нет, а это не то, что нам нужно, поэтому его нет.
  • render не имеет предыдущих реквизитов.
  • getSnapshotBeforeUpdate передает параметр в componentDidUpdate, после чего компонент уже визуализируется, поэтому я не могу установить начальный внешний вид.

Полагаю, я мог бы сохранить предыдущее имя пути и использовать его в следующий раз в render, но это не выглядит элегантным решением.Какова лучшая практика в этой ситуации?

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

Вы заявили, что 

getDerivedStateFromProps only has access to the previous props.

Но getDerivedStateFromProps имеет доступ к следующим реквизитам и предыдущему состоянию

Сохранение предыдущего пути может показаться не элегантным, я согласен, но здесь предлагается альтернатива: https://codesandbox.io/s/rjyvp7l3rq найдено здесь https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html.

Взгляните на неконтролируемый компонент EmailInput, сохраняющий предысторию в состоянии 

state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

Вот отличная статья о новых жизненных циклах: https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

0 голосов
/ 24 сентября 2018

Согласно документации реагирования, вы должны использовать componentDidUpdate.У него есть доступ к prevProps, prevState и текущим реквизитам, состояние в this.props, this.state.

Ознакомьтесь с документацией https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
    if(this.props.pathname !== prevProps.pathname) {
      //do something here or setState to adjust the appearance accordingly
    }
}
0 голосов
/ 24 сентября 2018

Вы можете использовать ниже, который является безопасным и рекомендовать Reactjs 

componentDidUpdate(prevProps) { 

     if (this.props.userID !== prevProps.userID) {

        this.fetchData(this.props.userID); 

    }
 }
...