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