Question

如何在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);
    });
  }

Answer 1

使用此功能可能会有所帮助

window.location.reload();

Answer 2

您可以在window.location.reload();生命周期方法中使用componentDidMount()。如果您使用的是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;

Answer 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}
    );
  }
}

Answer 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不利。

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

4 个答案: