时间戳

首页 > 解决方案 > 刷新后如何将数据保存在localStorage中？

reactjs - 刷新后如何将数据保存在localStorage中？

问题描述

我正在使用 react 来编写一个子组件。此子组件从其父组件获取其状态。

Class ChildDetails extends Component{
    constructor(props) {
        super(props);
        this.state = {
          messageId: this.props.messageId,
        };
    }
    componentDidMount() {
        localStorage.setItem("messageId", this.props.messageId);
    }
}

我确信在第一次渲染 Child 组件时，数据会存储到 localStorage 中。但是当我想在刷新页面后从localStorage中获取数据时，localStorage被清除了。我想可能是因为我使用的是本地开发环境，我使用

localhost:3000

访问我的应用程序。但我不知道为什么。

我的 Parent 组件是根 App，我Route用来将数据传递给 Child 组件。数据来自redux商店。

<Route
    path="/messageDetails"
    render={(props) => (
    <Child
     {...props}
     messageId={this.props.messageId}
     />
  )}
></Route>

const mapStateToProps = (state) => {
    messageId: state.Reducer.messageId,
}

标签： reactjs

解决方案

当您刷新浏览器时，您的组件将重新渲染并调用 componentDidMount 生命周期方法。所以我认为错误可能来自您messageId可能未定义的事实。避免这种情况的一种方法是添加条件，这样如果您在 localStorage 中有一个项目，它就不会尝试设置它。

Class ChildDetails extends Component{
    constructor(props) {
        super(props);
        this.state = {
          messageId: this.props.messageId,
        };
    }
    componentDidMount() {
        if(!localStorage.getItem("messageId")){
            localStorage.setItem("messageId", this.props.messageId);
        }
    }
}

顺便说一句，我建议不要将 messageId 保存到 ChildDetails 状态，因为 redux 的目的是将状态放置在中心位置并在必要时将其馈送到组件中。

推荐阅读