ブラウザの「戻る」ボタンを使用したときに反応が矛盾した状態で表示される

Question

Rails 5.1アプリでReact 16.1.1（リアクション宝石付き）を使用しています。

ブラウザの「戻る」ボタン（firefox/chrome/safariでテスト済み）を使用してこのページに戻るときを除き、特定のページのリアクションコンポーネントは正常に機能します。この場合、表示はコンポーネントの状態と矛盾します。問題のデモをセットアップしました：https://lit-bastion-28654.herokuapp.com/

ステップを再現する：

1. が '選択モード' ボタンをクリックしてオン/ Page1の
2. こと、それは本当
3. クリック 'のページ2'
4. 使用する 'のselectionMode' を設定し、 「戻る」ボタンを1ページ目に戻す
5. 予想される動作：ボタンが灰色です（コンポーネントがロードされるとselectionModeはfalseにリセットされます）。観察された行動：ボタンはまだ青いですか？そこ

、あなたはselectionModeは本当だったかのようにボタンは、青であることがわかりますが、インクルードは、ブラウザのプラグインがselectionModeが偽であることを示して反応します。 Reactブラウザプラグインは、ボタンに「btn-primary」クラス（selectionModeがfalseの場合は正常）を持たないことを示していますが、明らかにDOMにはbtn-primary 'クラス、それは青く見えるので。

これは私のコードです：

page1.html.erb：

<%= react_component("EditableCardList", { editable: true }) %> 

editable_card_list.js.jsx：

class EditableCardList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectionMode: false 
    }; 

    this.toggleSelectionMode = this.toggleSelectionMode.bind(this); 
    } 


    toggleSelectionMode() { 
    this.setState(prevState => ({ selectionMode: !prevState.selectionMode })); 
    } 


    render() { 
    if (this.props.editable === true) 
     return (
     <div> 
      <div className="row card-buttons"> 
      <div className="col-md-12"> 
       <div className="pull-left"> 
       <ManageCardsButtons 
        selectionMode={this.state.selectionMode} 
        toggleSelectionMode={this.toggleSelectionMode} 
       /> 
       </div> 
      </div> 
      </div> 
     </div> 
    ) 
    } 
} 

manage_cards_buttons.js.jsx ：

class ManageCardsButtons extends React.Component { 
    constructor(props) { 
    super(props); 
    } 


    render() { 
    return (
     <span> 
     <button type="button" className={`btn btn-default btn-sm ${this.props.selectionMode ? 'btn-primary' : ''}`} onClick={this.props.toggleSelectionMode}>Selection mode</button> 

     { this.props.selectionMode && <span>selection mode</span> } 
     </span> 
    ) 
    } 
} 

私の質問は：ブラウザで「戻る」を使用した後、ボタンが正しく再レンダリングされていることを確認します（青ではなく灰色で表示されます）。

問題はturbolinksとキャッシュに関連している可能性がありますが、まだ理解できていません。

Answer 1

ReactとTurboLinksが競合するため、最終的な解決策は特定のページでTurboLinksのキャッシュを無効にすることでした。

Answer 2

ページ1に戻ると、コンポーネントが再び引き込まれ、デフォルトのselectionModeが設定されます。これは、ケースではfalseです。

1. reduxを使用できます。
2. 変更するときは localStorageにselectionModeを保存し、デフォルトでは ストレージからロードします。