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

每次当我切换到这个组件时，它将首先运行构造函数。所以状态将为空。

我想要的是如果stories有项目，它不需要再次获取数据。

有什么方法可以保持这种状态吗？

Answer 1

我认为实现这一目标的最佳方法是使用 react-redux由此，您有一个集中存储来维护所有组件的状态，从而避免每次组件加载时刷新

<强> Here 是一篇很好的文章，可以帮助您开始使用 redux。

做你想做的事情的另一种方法是将你的状态保存在 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
                }));
            }
        });
    }