如何在Reactjs中切換組件時保持狀態？

Question

我有一個部件

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {stories: []}; 
    } 

    componentDidMount() { 

     $.get(Api.getList(), (result) => { 
      const data = result; 
      if (data) { 
       this.setState((prevState) => ({ 
        stories: data.stories 
       })); 
      } 
     }); 
    } 

    render() { 
    if(this.state.stories.length==0){ 
     return (
      <Tpl> 
       <Loading/> 
      </Tpl> 
     ); 
    }else{ 
     return (
      <Tpl> 
       <Stories stories={this.state.stories} /> 
      </Tpl> 
     ); 
    } 
    } 
} 

，每次當我切換到該組件， 它將運行constructor第一。 所以國家將是空的。

我想要的是如果stories有項目，它不需要再次獲取數據。

是否有任何方法來保持這種狀態？

Answer 1

我認爲實現這一目標的最佳途徑是使用react-redux，讓你擁有它保持狀態，所有的組件，因此從清涼的每次保存它的部件載荷

Here是一個很好的集中存儲文章來幫助你開始使用REDX。

另一種做你想做的事的方法是讓你的狀態保存在localStorage中，從而在每個組件負載中加載數據從localStorage開始，並設置爲初始狀態，當更新狀態時也更新那裏的值。以下是您可以遵循這種方法的示例方法。

constructor(props) { 
    super(props); 
    var stories = JSON.parse(localStorage.getItem('stories')) || null 
    this.state = {stories: stories}; 
} 
componentDidMount() { 

     $.get(Api.getList(), (result) => { 
      const data = result; 
      if (data) { 
       JSON.stringify(localStorage.setItem('stories', data.stories)); 
       this.setState((prevState) => ({ 
        stories: data.stories 
       })); 
      } 
     }); 
    }