更新路由更改時的組件狀態？ （react-router）

Question

我想寫一個讓用戶在帖子中移動的東西。所以你看一個特定的帖子，然後你可以去上一個或下一個帖子。我正在嘗試使用反應路由器來做到這一點。所以說用戶看着posts/3，然後點擊NEXT，他或她將被重定向到posts/4，然後看到帖子號。 4.

但是，它還沒有工作。點擊按鈕可以正常工作，並且它也會更改瀏覽器中的URL。但是，我不知道如何獲取新帖子（並重新填充我的currentPost縮減器），只要路由發生變化。

我到目前爲止是這樣的：

import React from 'react' 
import {connect} from 'react-redux' 

import {fetchPost} from '../actions/currentPost.js' 


class PostView extends React.Component { 

    constructor(props) { 
    super(props); 

    this.setNextPost = this.setNextPost.bind(this); 
    this.setPreviousPost = this.setPreviousPost.bind(this); 
    } 

    componentDidMount() { 
    const {id} = this.props.match.params; 
    this.props.fetchPost(id); 
    console.log("HELLO"); 
    } 

    setPreviousPost() { 
    var {id} = this.props.match.params; 
    id--; 
    this.props.history.push('/Posts/1'); 
    } 

    setNextPost() { 
    var {id} = this.props.match.params; 
    id++; 
    this.props.history.push('/Posts/'+id); 
    } 

    render() { 
    return (
     <div> 
     <h1>Here is a Post</h1> 
     <button onClick={this.setPreviousPost}>Previous</button> 
     <button onClick={this.setNextPost}>Next</button> 
     </div> 
    ); 
    } 
} 

function mapStateToProps (state) { 
    return { 
    currentPost: state.currentPost 
    }; 
} 

export default connect(mapStateToProps, {fetchPost})(PostView); 

Answer 1

你要找的生命週期方法是componentWillReceiveProps

這裏或多或少它會是什麼樣子：

class Component extends React.Component { 
    componentWillReceiveProps(nextProps) { 
    const currentId = this.props.id 
    const nextId = nextProps.id 

    if (currentId !== nextId) { 
     this.props.fetchPost(nextId) 
    } 
    } 
} 

從那裏，我認爲Redux/React將爲您處理剩下的問題。