如何在反应应用程序中重新加载页面（状态）答案

【问题标题】：How to reload a page (state) in a react app如何在反应应用程序中重新加载页面（状态）
【发布时间】：2018-03-18 23:35:06
【问题描述】：

我开始学习 react.js，并且我在 react 应用程序中开发了一个简单的石头剪刀布游戏。我发现创建重新加载按钮有点困难，因为它当然不同于具有以下功能的 javascript 按钮：

<button onclick="reload">RESTART GAME</button>
function reload() {
  location.reload();
}

对于这个 React 应用，我认为可行的是：

<button type="button" onClick={ refreshPage }> <span>Reload</span> </button>
function refreshPage(){ 
  window.location.reload(); 
}

到 App.js 文件，但我收到错误消息：

./src/App.js
Syntax error: Unexpected token (64:11)

  62 |   }
  63 | 
> 64 |   function refreshPage(){
     |            ^
  65 |     window.location.reload();
  66 |   }
  67 | }

完整的项目可以在这里找到github（npm start 将在终端/控制台中启动项目）

任何有关如何纠正此问题的见解将不胜感激，谢谢！

【问题讨论】：

代码在组件内吗？

标签： javascript reactjs

【解决方案1】：

在反应中，您不必刷新页面即可重置状态。我查看了您的项目，发现您将分数和游戏数据保存在组件状态。这有助于您只需将状态设置为初始值即可轻松重置游戏。

举例

// add a method to your component for resetting state
restartGame(event) {
  this.setState({ games: [] });
}

// and in your components render or any other place add the reset button
<button type="button" onClick={ this.restartGame.bind(this) }>
  <span>Reload</span>
</button>

不要忘记绑定您的方法以便能够在其中使用this。有关这方面的更多信息，您可以阅读 Handling Events 的反应文档。

【讨论】：

这太完美了！非常感谢 bennygenel！

【解决方案2】：

检查下面的代码 sn-p 以了解刷新页面以重置游戏的解决方法。

但这不是最佳实践，因为 React 支持更改使（默认情况下）组件重新渲染的状态。 React 有一个叫做 Virtual DOM 的概念。这样应用程序就会非常快。因为 React 会通过比较 diff 来更新实际的 DOM。

最好按照其他答案的建议更改状态。 this.setState({games:[]})

下面是解决方法（刷新页面）的代码sn-p

class App extends React.Component {
    render() {
      return ( < button onClick = {this._refreshPage} > test </button>);
      }

      _refreshPage() {
        console.log("Clicked");
        window.location.reload();
      }
    }


ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="app"></div>

【讨论】：

【解决方案3】：

我喜欢文章中保留先前状态和重置功能的解决方案 - https://medium.com/@justintulk/best-practices-for-resetting-an-es6-react-components-state-81c0c86df98d

在构造函数中：

// preserve the initial state in a new object
this.baseState = this.state

和

resetForm = () => {
  this.setState(this.baseState)
}

【讨论】：

这是复杂应用程序的最佳解决方案，因为它减少了代码，并且不会通过强制重新加载窗口而意外损坏可能需要的其他状态（例如 api 凭据）。

【解决方案4】：

有两种方法

您可以通过重置状态来重置游戏
您可以重新加载网页并重置 React 应用程序。

第二个是有原因的，但也有点贵。

方式 1 - 参考@bennygel 答案

  // add a method to your component for resetting state
restartGame(event) {
  this.setState({ games: [] });
}

// and in your components render or any other place add the reset button

<button type="button" onClick={ this.restartGame.bind(this) }>
  <span>Reload</span>
</button>

方式2：参考@dwij 回答

【讨论】：

【解决方案5】：

您真正想要的是重置状态，而不是重新加载页面。

通过在点击处理程序中调用this.setState({ games: [] })

从错误信息来看，这是一个语法错误，很可能是拼写错误或类似的东西

【讨论】：

【解决方案6】：

作为上述的一个小变化，我在构造函数和 resetPage 函数中都使用了 defaultState 对象。这样默认状态只需要定义和维护一次。

例如

默认状态：

  const defaultState = {
  oppNum: '',
  detailKey: '',
  loaded: false,
  showUserInput: false,
  showYesNo: false,
  showSubmission: false,
  accepted: false,
  disableSubmit: true,
  showSave: true,
  showModal: false,
  modalOptions: {},
};

内部构造函数：

this.state = defaultState;

重置功能：

  resetPage() {
    this.setState(state => ({ ...defaultState }));
  };

希望这会有所帮助：D

【讨论】：