2
私は、ユーザーが投稿を移動できるようにすることを試みています。だからあなたは特定の投稿を見て、前の投稿または次の投稿に行くことができます。私は反応ルータでこれをやろうとしています。だから、ユーザがposts/3を見て、次にNEXTをクリックすると、彼はposts/4にリダイレクトされ、ポスト番号が表示されます。 4.経路変更のコンポーネント状態を更新しますか？ （反応ルータ）
ただし、まだ動作しません。ボタンをクリックするとうまく動作し、ブラウザのURLも変更されます。しかし、ルートが変更されたときにいつ新しいポストを取得して（そしてcurrentPostレデューサーを新たにポピュレートするか）わからない。
私はこれまで持っていることは、このされています
class Component extends React.Component {
componentWillReceiveProps(nextProps) {
const currentId = this.props.id
const nextId = nextProps.id
if (currentId !== nextId) {
this.props.fetchPost(nextId)
}
}
}
：ここではそれがどのように見えるか、多かれ少なかれだ
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);