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

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

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

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

localhost:3000

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

我的父组件是根应用程序，我使用

Route

将数据传递给子组件。数据来自

redux

存储区

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

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

(
)}
>
常量mapStateToProps=（状态）=>{
messageId:state.Reducer.messageId，
}

刷新浏览器时，组件将重新呈现并调用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的目的是将状态放置在一个中心位置，并根据需要将其馈送到组件中。

在``componentDidMount``中

this.props.messageId

的值是什么？当此组件装载时，本地存储中是否有项？

this.props.messageId

in

componentDidMount

是来自父组件的

messageId

，它们都是相同的。@Hyetigran在安装组件后，我在浏览器中检查本地存储，它具有来自父组件的值。但是当我刷新页面时，本地存储被清除，键仍然存在，但是值被清除。我认为问题是由于您保存状态和装载组件的方式造成的。你也可以分享你的父组件吗？它可以工作。此外，如果清除localStorage并重新输入组件，则应使用

{localStorage.getItem（“messageId”）？localStorage.getItem（“messageId”）：this.props.messageId}