代码之家 › 专栏 › 技术社区 › S S

生成一个公共函数来存储本地存储数据

react-redux react-native reactjs

1

S S · 技术社区 · 6 年前

-screens
  -page1.js
  -page2.js
  -page3.js
  -page4.js
-App.js

在page1.js中,我有一个函数将数据存储到localStorage

let obj = {
    name: 'John Doe',
    email: 'test@email.com',
    city: 'Singapore'
}
AsyncStorage.setItem('user', JSON.stringify(obj));

现在我必须在其他页面中显示这些数据。这是我的密码。

class Page2 extends Component {
    state = {
        username: false
    };

    async componentDidMount() {
        const usernameGet = await AsyncStorage.getItem('user');
        let parsed = JSON.parse(usernameGet);
        if (parsed) {
            this.setState({
                username: parsed.name,
                email: parsed.email
            });
        } else {
            this.setState({
                username: false,
                email: false
            });
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.saved}>
                    {this.state.username}
                </Text>
            </View>
        );
    }
}

export default Page2;

我不想每页都重复这些代码。

你有什么建议吗?

2 回复 | 直到 6 年前

1

0

Anthony Bennett 6 年前

您可以将需要显示的数据提取到它自己的组件中,并在需要显示它的任何页面中重用它。

higher-order component ,这样就可以将它包装在任何需要数据的组件上,并将其作为道具传递下去。

2

0

Sakhi Mansoor 6 年前

你可以 Constant.js 你可以把所有常用的必需的实用程序和常量,在你的应用程序中的任何地方重用。

常数js :

export const USER_DATA = {

 set: ({ user}) => {
      localStorage.setItem('user', JSON.stringify(obj));
   },
   remove: () => {
      localStorage.removeItem('user');
      localStorage.removeItem('refresh_token');
 },
   get: () => ({
     user: localStorage.getItem('user'),
  }),

 }

import { USER_DATA } from './Constants';


let user = {
name: 'John Doe',
email: 'test@email.com',
city: 'Singapore'
 }

// set LocalStorage

USER_DATA.set(user);

// get LocalStorage

USER_DATA.get().user

你能做的 Constant 公共文件并在任何地方重用它们以避免编写冗余代码。