ReactJS에서 현재 페이지를 새로 고치는 방법?

Question

ReactJS에서 현재 페이지를 새로 고치는 방법? 우리가 쓸 수있는 자바 스크립트의 경우 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

도움이 될 수도, 당신은 정말 어디에서나 배치 할 수 있습니다! 예를 들어, 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 2

사용이

window.location.reload(); 

Answer 3

당신은 당신의 componentDidMount() 수명주기 방법에 window.location.reload();를 사용할 수 있습니다. react-router을 사용하는 경우 해당 번호는 refresh method입니다.

편집 : 데이터 업데이트 후이를 수행하려면 reload이 아닌 re-render을 찾고있을 수 있으며 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;