Question

页面加载时我无法获得localStorage值

如果刷新页面，则该页面正在运行。

页面加载后如何获取localStorage值。

我有两个文件，一个是utils.js，在这个文件中我声明了一个对象

export const user = {
      id: window.localStorage.userId
    };

另一页是该页面上的userDetails.js，我对它有所了解

import {user} from './utils';

componentDidMount=() => {
   console.log(user.id);//for the first time its getting null .when i refresh the page value is updated
}

Answer 1

//使用状态和道具概念在react中进行数据流
// Util.js

import React, Component from 'react'; 
class Utils extends Component{
        state = {
            user: {
                 id: window.localStorage.userId
            }
        } 
}  
export default Utils;

//UserDetails.js
import React, Component from 'react';
import Utils from './Utils';
class UserDetails extends Component{
    componentDidMount=() => {
        console.log(this.props.user.id);//One time
    }
    componentWillReceiveProps(newProps){
        if(this.props.user !== newProps.user)
            console.log(newProps.user); // Each time props changes
    }
}

此外，redux可用于全局状态管理 https://redux.js.org/ 我希望这会有所帮助。

安装组件后如何获取本地存储值？

1 个答案: