this.props.history.pushを介して渡されたデータは、ターゲットページ内で奇妙な振る舞いをしています

Question

基本コンポーネントに定義されているいくつかのデータをベースコンポーネントから別のコンポーネントにプッシュしようとしていますが、history.pushでパラメータとして送信されます。

Base Component

class BaseComponent extends React.Component 
{ 
    gotoTargetPage() 
    { 
     const params = { data: {fname: 'john', lname: 'doe' } }; 
     this.props.history.push('/target-page', params); 
    } 

    render() 
    { 
     return(<button onClick={event => this.gotoTargetPage()}>Go!</button>) 
    } 
} 

export default withRouter(BaseComponent); 

TargetPage Component:

class TargetComponent extends React.Component 
{ 
    componentDidMount() 
    { 
     console.log(this.props.history.location.state.data); 
    } 

    render() 
    { 
     return(<div>Hi! I am {this.props.history.location.state.data.fname}.</div>) 
    } 
} 

私は基本コンポーネントのボタンをクリックすると、それが正常にターゲットページをロードします。しかし、コンソールログthis.props.history.stateをundefinedとし、パラメータを使用せずにデータをレンダリングします（使用できないため）。

ここはひねりです。ページを更新すると、表示されているデータを見ることができ、コンソールはデータを正しく記録します。リフレッシュするだけでなく、最初のステップの後に戻るボタンを押すと、データが表示され、コンソールにデータが記録されます。また、これは時間の約75％が発生し、4回に1回の試行では問題なく発生します。

新しいコンポーネントを作成するのと同じ状況を繰り返しましたが、同じ結果が得られました。これの理由は何でしょうか？

Environment:

"react": "^15.5.4", 
"react-router": "^4.1.1" 

Answer 1

私はあなたがパスのURLとオプションの状態オブジェクト

history.push('/some/path', { some: 'state' }) 

を渡すどちらか

（https://github.com/reacttraining/historyを参照してください）あなたはhistory.push()の2人の署名を組み合わせることかもしれないと思いますまたはすべてを1つのオブジェクトに渡す

history.push({ 
    pathname: '/home', 
    state: { some: 'state' } 
}) 

Answer 2

問題は、コンポーネントがもう一度別の理由で再レンダリングされたため、小道具が送信されたパラメータを失うため、this.props.history.location = undefinedを設定することでした。次のアプローチが私のために働いた。

/** 
* When component mounts, grab the params if there is any and setState 
*/ 
componentWillMount() 
{ 
    // when params sent via url 
    if (this.props.history.location.state) 
    { 
     let params = this.props.history.location.state; 
     this.setState({ params }); 
    } 
} 

データはコンポーネント状態で保存されるため、データは失われず、どこからでも入手できます。