Question

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

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

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

我的父组件是根应用程序，我使用Route将数据传递给子组件。数据来自redux存储。

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

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

Answer 1

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

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

1 个答案: