在单页应用程序中刷新页面

Question

比方说，您收到一个链接，该链接将您带到单页应用程序中的页面。您希望能够立即看到该页面（当然，如果您已登录）。

问题是未从服务器获取数据，因此页面为空。

哪种做法是最好的方法，以获取所有必要的数据才能正确看到该页面？基本上，刷新页面时，您希望保留在该位置，而不是重定向到“ /”（例如）。

我考虑过要制作一个单独的组件来获取所有数据，并在完成所有操作后呈现页面。但是，它有一个缺点，那就是在正常使用应用程序时会重复获取数据。

Answer 1

使用单页应用程序，您不必自己手动刷新。我会考虑在您的单页应用程序中使用react-router进行导航。此外，当特定视图（反应组件）需要更多数据才能正确显示时，我将利用componentDidMount() lifecycle。在componentDidMount()中，您可以使用Axios或浏览器的内置fetch api获取必要的数据。理想情况下，您不应一次获取整个应用程序，并且您的React组件本质上是模块化的。作为如何利用Axios库的示例，可以执行以下操作：

1. 安装axios：

   npm install -S axios yarn add axios

2. 使用componentDidMount()生命周期方法为您的react组件获取必要的数据：

反应组件：

componentDidMount(){ // Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { // handle success: i.e. set your state so you can use your data console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed }); }

希望有帮助！

Answer 2

正如@Nathan所指出的那样，刷新单个页面应用程序是一个不好的做法。

我建议检查数据变量是否未定义（如果使用受控组件，则为props），并根据该变量返回（以表明页面仍在加载中）组件或

例如if（！this.props）返回; //如果要显示一个                                          //白页      返回;

希望这可以澄清它！ 祝您编码愉快！