Reactjs 使用浏览器“后退”按钮时，React中的状态和显示不一致

我正在rails 5.1应用程序中使用React 16.1.1和React rails gem

特定页面上的React组件工作正常，除非使用firefox/chrome/safari测试的浏览器“后退”按钮返回此页面。在这种情况下，显示与零部件的状态不一致。我已设置了问题的演示：

复制步骤：

在第1页 单击“选择模式”按钮，它将“selectionMode”设置为true 单击“第2页” 使用“后退”按钮返回到第1页 预期行为：按钮为灰色selectionMode在加载组件时重置为false。观察到的行为：按钮仍然是蓝色的？！ 在这里，您可以看到按钮是蓝色的，就好像selectionMode是true一样，但是react浏览器插件显示selectionMode是false。React浏览器插件显示错误信息：它显示按钮没有“btn主”类，如果selectionMode为false，这是正常的，但您可以明显地看到，在DOM中，它有“btn主”类，因为它显示为蓝色

这是我的代码：

page1.html.erb：

可编辑的卡片列表.js.jsx：

类EditableCardList扩展了React.Component{ 构造器{ 超级作物； 此.state={ selectionMode:false }; this.toggleSelectionMode=this.toggleSelectionMode.bindthis； } 切换选择模式{ this.setStateprevState=>{selectionMode:！prevState.selectionMode}； } 渲染{ 如果this.props.editable==true 回来 } } 管理卡片按钮.js.jsx：

类ManageCardsButtons扩展React.Component{ 构造器{ 超级作物； } 渲染{ 回来 选择模式 {this.props.selectionMode&&selection mode} } } 因此，我的问题是：如何确保在浏览器中使用“后退”后，按钮被正确重新命名，并显示为灰色而不是蓝色

---

这个问题可能与内存和缓存有关，但我还没有弄清楚。

当您返回到第1页时，组件重新加载，并设置默认的selectionMode，在您的情况下该模式为false

您可以使用redux。 您可以将selectionMode保存到 localStorage，默认情况下从 存储

---

React和TurboLinks冲突，因此我的最终解决方案是禁用该特定页面上的TurboLinks缓存。

您没有回答这个问题。我已经更新了我的问题，以便更准确地理解我的意思。我确实希望在重新下载组件时将selectionMode重置为false。问题是该按钮没有反映该状态，它与“btn primary”类一起显示，但它不应该显示。请尝试在“React”页面上，将标记包含在页面标题中。@RobertFarley有效，尽管出于性能原因，我不想使用它。您是否使用最新版本的turbolink和react rails gem？@RobertFarley是的。

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