Освежающие в реакцию маршрутизатора, жизненный цикл компонента

Question

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

class ThingView extends Component { 
    constructor(props) { 
     super(props) 
    } 
    componentWillMount() { 
     this.props.loadThingThenFrames(this.props.id) 
    } 
    componentDidUpdate(prevProps) { 
     console.log("did update") 
     if (prevProps.id !== this.props.id) { 
      this.props.loadThingThenFrames(this.props.id) 
     } 
    } 
    render() { 
     return (
      <div className="container"> 
       { this.props.isRequesting ? <p>Loading thing...</p> : null} 
       <h1> {this.props.thing ? this.props.thing.device_id : "Thing Not Found"} </h1> 
       <Timeline frames={this.props.frames} /> 
      </div> 
     ) 
    } 
} 

const mapStateToProps = (state, ownProps) => ({ 
    thing: state.thingView.thing, 
    frames: state.thingView.frames, 
    id: ownProps.params.id, 
    isRequesting: state.thingView.isRequesting, 
    requestError: state.thingView.requestError 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    loadThingThenFrames: (id) => { dispatch(loadThingThenFrames(id)) } 
}) 

Этот компонент визуализируются при things/:id. Согласно react-router docs, componentDidUpdate вызывается, когда реквизит изменяется, например, когда вещь выбрана из списка вещей. Я хочу, чтобы loadThingThenFrames, когда страница обновляется, или если кто-то покидает ThingView, а затем возвращается к ThingView с тем же thing. В настоящее время этого не происходит, так как предыдущий props.id совпадает с текущим props.id, если я удалю эту проверку, тогда будет вызван бесконечный цикл реквизита, который будет вызван и вызывается componentDidUpdate.

Answer 1

Он считает, что проблема заключается в том, что componentDidUpdate не вызывается для первоначального рендера (когда компонент монтируется) - он вызывается только при повторной визуализации компонента. Поэтому он не вызывается после обновления страницы или когда вы возвращаетесь на компонентный маршрут, потому что компонент монтируется в таких случаях (не перерисовывается) - создается новый экземпляр компонента и добавляется в DOM.

Так, помимо вызова loadThingThenFrames когда компонент обновляется вы должны также вызвать loadThingThenFrames когда компонент установлен - в компоненте конструктора или другого метода жизненного цикла, который вызывается, когда компонент установлен (componentWillMount или componentDidMount). Пожалуйста, проверьте React docs для получения дополнительной информации о жизненном цикле ccomponents.