如何在 ReactJS 中重新加载当前页面？答案

【问题标题】：How to reload current page in ReactJS?如何在 ReactJS 中重新加载当前页面？
【发布时间】：2018-04-22 10:49:55
【问题描述】：

如何在 ReactJS 中重新加载当前页面？如果是javascript，我们可以写window.location.reload(); 如何在 Reactjs 中做同样的事情？我可以通过 UI 添加新数据。但是如果不刷新，我就看不到列表。我想要它，这样每当我添加一些数据时，它就会自行刷新。

onAddBucket() {
    let self = this;
    let getToken = localStorage.getItem('myToken');
    var apiBaseUrl = "...";
    let input = {
      "name" :  this.state.fields["bucket_name"]
    }
    axios.defaults.headers.common['Authorization'] = getToken;
    axios.post(apiBaseUrl+'...',input)
    .then(function (response) {

      if(response.data.status == 200){
      let result =  self.state.buckets.concat(response.data.buckets)
      }else{
        alert(response.data.message);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }

【问题讨论】：

查看上一篇文章的这个答案。 stackoverflow.com/a/31553732/5038073

标签： javascript reactjs

【解决方案1】：

使用它可能会有所帮助

window.location.reload();

【讨论】：

当您已经在您想要的位置时，此方法有效...重要的是要注意您当前的路径位置是什么
这会重新加载页面，但是样式不会加载！我正在使用单页应用程序，如果这意味着什么的话。

【解决方案2】：

您可以在 componentDidMount() 生命周期方法中使用 window.location.reload();。如果您使用的是react-router，它有一个refresh method 来执行此操作。

编辑：如果您想在数据更新后执行此操作，您可能会寻找re-render 而不是reload，您可以使用this.setState() 来做到这一点。这是获取数据后触发re-render 的基本示例。

import React from 'react'

const ROOT_URL = 'https://jsonplaceholder.typicode.com';
const url = `${ROOT_URL}/users`;

class MyComponent extends React.Component {
    state = {
        users: null
    }
    componentDidMount() {
        fetch(url)
            .then(response => response.json())
            .then(users => this.setState({users: users}));
    }
    render() {
        const {users} = this.state;
        if (users) {
            return (
                <ul>
                    {users.map(user => <li>{user.name}</li>)}
                </ul>
            )
        } else {
            return (<h1>Loading ...</h1>)
        }
    }
}

export default MyComponent;

【讨论】：

您说重新渲染可能比在数据更新后重新加载更可取。如果服务器数据已更改，则重新加载将确保您显示当前服务器数据，而不是仅更新前端的重新渲染，并且可能不会显示与服务器相同的数据。还是我误解了什么？（我想这取决于您对服务器数据在没有重新加载的情况下会如您所愿的信心）。
如果服务器中的数据发生了变化并且你想显示它，前端应该有一个方法来获取这些数据，比如 WebSockets 或轮询，并在获取这些新数据时触发重新渲染。
您说“..并在获取此新数据时触发重新渲染。”重新加载基本上不是获取数据然后重新渲染吗？
重新渲染不会触发页面重新加载。它们是不同的概念。重新加载刷新整个页面，再次获取所有数据。仅在必要时重新渲染更新。
我想触发重新渲染，但this.setState() 说this 未定义，因为我需要在回调中触发重新渲染。有什么想法吗？

【解决方案3】：

由于 React 最终归结为简单的旧 JavaScript，因此您真的可以将它放在任何地方！例如，您可以将它放在 React 类的 `componentDidMount()' 函数中。

对于您的编辑，您可能想尝试以下方法：

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.onAddBucket = this.onAddBucket.bind(this);
  }
  componentWillMount() {
    this.setState({
      buckets: {},
    })
  }
  componentDidMount() {
    this.onAddBucket();
  }
  onAddBucket() {
    let self = this;
    let getToken = localStorage.getItem('myToken');
    var apiBaseUrl = "...";
    let input = {
      "name" :  this.state.fields["bucket_name"]
    }
    axios.defaults.headers.common['Authorization'] = getToken;
    axios.post(apiBaseUrl+'...',input)
    .then(function (response) {
      if (response.data.status == 200) {
        this.setState({
          buckets: this.state.buckets.concat(response.data.buckets),
        });
      } else {
        alert(response.data.message);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  render() {
    return (
      {this.state.bucket}
    );
  }
}

【讨论】：

你好@RiyaKapuria，所以也许你想做的是调用获取数据所必需的api，然后一旦它被加载，使用一个执行页面刷新的回调函数。跨度>
另外，上面的 Tiago 提出了一个非常扎实的观点。你可能只是在寻找重新渲染，在这种情况下，React 处理得很好。
我想要数据的串联
对不起，我不完全确定您的意思。请详细说明
另外，您是否看过我回答中的示例？我认为它很好地解决了你的问题。你必须使用this.seState() 方法。

【解决方案4】：

这是我的代码。这对我有用

componentDidMount(){
        axios.get('http://localhost:5000/supplier').then(
            response => {
                console.log(response)
                this.setState({suppliers:response.data.data})
            }
        )
        .catch(error => {
            console.log(error)
        })
        
    }

componentDidUpdate(){
        this.componentDidMount();
}

window.location.reload();我觉得这个东西对 react js 不好

【讨论】：